Mime type error when adding external js to Vue CLI

4
votes

I’m trying to add an external JS or CSS file to the Vue CLI I have installed Bootstrap Vue with Webpack Simple

So I’m trying to add a simple JS file containing a simple array to the index.html. As far as I understood, these kind of resources should be placed within the static (not present by default in Webpack simple) or the assets folder. As a result, I always get the same 2 errors.

GET http://localhost:8080/assets/settings.js 404 (Not Found) Refused to execute script from 'http://localhost:8080/assets/settings.js' because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

The only way to get rid of the errors is to change the mime type to text/html, but then javascript is no longer interpreted by the browser.

Can someone help me?

1
webpackmime-typesvue-cli

1 Answers

0
votes

First solution

I fixed such error manually, by modification of the paths at the dist/index.html file:

Initial path:

src=/js/app.96a55d06.js

Modified path (dot added to the beginning of the string):

src=./js/app.96a55d06.js

Such procedure was repeated for both .css and .js imports

Second solution(better)

  1. Run npm run build, where build is defined as vue-cli-service build
  2. Make some kind of server: python3 -m http.server. Note, that it should be done inside the dist folder (folder with your build)