Hi,
I don’t know exactly if this is related to Vue.js or Apache, but I want to give it a try. Maybe someone has made some experience with this topic?
I want to build and deploy a Vue.js app (or website) on my Raspberry, where I’m running an Apache2 server that already hosts some simple websites. Just build and copy doesn’t seem to work. Am I missing some additional configurations that I need to do for the Apache2 server?
System settings
>> cat /sys/firmware/devicetree/base/model
Raspberry Pi 3 Model B Rev 1.2
>> cat /etc/os-release
PRETTY_NAME="Raspbian GNU/Linux 11 (bullseye)"
NAME="Raspbian GNU/Linux"
VERSION_ID="11"
VERSION="11 (bullseye)"
VERSION_CODENAME=bullseye
ID=raspbian
ID_LIKE=debian
...
>> node --version
v19.3.0
>> npm --version
9.2.0
>> apache2 -v
Server version: Apache/2.4.54 (Raspbian)
Procedure: create and deploy vue.js app
I first create a new vue3 app:
vue create example-app
> Default ([Vue 3] babel, eslint)
Running in serve mode works well:
cd example-app
npm run serve
Now I’m building the static website:
npm run build
…and copy the dist files to my apache2 website location:
sudo cp -r ./dist /var/www/html/exampleApp
Error description
Apache is configured to host the pages under /var/www/html. The website is also recognized initially at http://192.168.188.21/exampleApp, but Firefox displays the following error log (sorry, don’t know how to switch the log output to englisch):
Das Skript von "http://192.168.188.21/js/chunk-vendors.b04f6ab6.js" wurde geladen, obwohl sein MIME-Typ ("text/html") kein für JavaScript gültiger MIME-Typ ist. (exampleApp)
Das Skript von "http://192.168.188.21/js/app.41dec64c.js" wurde geladen, obwohl sein MIME-Typ ("text/html") kein für JavaScript gültiger MIME-Typ ist. (exampleApp)
Stylesheet http://192.168.188.21/css/app.2cf79ad6.css wurde nicht geladen, weil sein MIME-Typ, "text/html", nicht "text/css" ist. (exampleApp)
Uncaught SyntaxError: expected expression, got '<' (chunk-vendors.b04f6ab6.js:1:4)
Uncaught SyntaxError: expected expression, got '<' (app.41dec64c.js:1:4)
undefined (pageModifier.js:585:17)
Mutations-Ereignisse sollten nicht mehr verwendet werden. Verwenden Sie MutationObserver stattdessen. (pageModifier.js:81:24)
In englisch it should be something like this:
The script of "http://192.168.188.21/js/chunk-vendors.b04f6ab6.js" was loaded although its MIME type ("text/html") is not a valid MIME type for JavaScript. (exampleApp)
The script of "http://192.168.188.21/js/app.41dec64c.js" was loaded, although its MIME type ("text/html") is not a valid MIME type for JavaScript. (exampleApp)
Stylesheet http://192.168.188.21/css/app.2cf79ad6.css was not loaded because its MIME type, "text/html", is not "text/css". (exampleApp)
Uncaught SyntaxError: expected expression, got '<' (chunk-vendors.b04f6ab6.js:1:4)
Uncaught SyntaxError: expected expression, got '<' (app.41dec64c.js:1:4)
undefined (pageModifier.js:585:17)
Mutation events should no longer be used. Use MutationObserver instead. (pageModifier.js:81:24)
