CODEWITHSUNDEEP
vue.jsvuejs2vue-cli
Gene Parcellano
Gene Parcellano

Reputation: 6044

Vue CLI build and run index.html file without server

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?

Upvotes: 22

Views: 18471

Answers (3)

Syed Andaleeb Roomy
Syed Andaleeb Roomy

Reputation: 571

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.

Upvotes: 41

Gene Parcellano
Gene Parcellano

Reputation: 6044

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.

Upvotes: 12

thopaw
thopaw

Reputation: 4044

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

Upvotes: -1

Related Questions