22

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?

1
  • 1
    Because of how strict browsers are with reading local files (for security reasons) it's hopeless to do any local webdev-testing without spinning up a web server. Commented Jun 12, 2018 at 8:28

3 Answers 3

41

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.

Sign up to request clarification or add additional context in comments.

2 Comments

This should be publicPath now, as baseUrl is deprecated
This answer saved my day. Better solution than the marked answer.
12

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.

1 Comment

How about asset files? Mine are stored in /src/assets/img/..., then in the /dist/ folder, they're moved to /dist/img/...
-1

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

3 Comments

I'm actually trying to use the generated files for a mobile app so I won't be able to run a server.
I assume that you are not developing the Vue app on the mobile device. So start the server on your development machine, put the mobile device in the same LAN and open the browser on the device on ip-of-dev:8080
I'm developing it using Phonegap. I've found another way around it, will post the answer soon. Thanks for looking into it. I appreciate it.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.