Vue CLI build and run index.html file without serv

Question

I'm using the latest vue-cli version 3.0.

My current issue is that whenever I run npm run build the files generated in the dist folder can't be run without a server.

I would like to be able to just open the index.html file on the browser. How do I go about doing this?

Answer 1

I was able to fix this issue by manually changing the url of the referenced files.

It's a bit of a pain, but this was a solution without having to mess around with the build configuration.

What you need to do:

1. Open index.html
2. Find href=/ and replace with href=
3. Find src=/ and replace with src=

NOTE: I was in need of this solution because I was creating a Phonegap app.

Answer 2

You can use the http-server module

npm install http-server -g
http-server dist/

normally the server starts at port 8080 so you can serve the build app on http://localhost:8080

Answer 3

I ran into a similar issue and the following two changes helped me to make it work. Now I can just open index.html in Chrome as a file to run my SPA from file system.

1. In vue.config.js, I did not have a publicPath configured, which resulted in the default "/".
   I had to configure it to empty string like this so that it uses relative paths:

   module.exports = {
       publicPath: '',
   }
   

   ^{PS: Since Vue CLI 3.3 use publicPath instead of the now deprecated baseURL}

2. I was using the history mode of vue-router, which does not work on a local file system to route the paths back to index.html. So I omitted the mode to go back to the default hash mode.