Host Vue.js app on raspberry pi with apache2

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)

Firefox error log