1

Vue docs explain how to configure various types of server for Vue-router's history mode, except when the server comes with default Webpack-simple / Vue CLI.

How to make history mode work in this scenario? (and why has such a common scenario been omitted? I'm very surprised)

Note: related thread (doesn't provide a clear answer to this problem)

1 Answer 1

1

The problem with history mode is that needs a server-side configuration to work properly.

You see, if i create a new project using vue cli (version 3) the history mode will work nicely. It's development mode, it will start on index.html, everything will be fine.

However if someone enters into your site with any link different than /, the server, if not correctly configured, will return a 404 or something like this.

This is why history mode is disabled on cordova application (hybrid mobile over webview serving content from filesystem, which definitively does not know how to 'rewrite' to index)

webpack/browserify/parcel etc have little business on it. for instance, vue cli uses webpack and history mode works ok in the development scenario.

UPDATE: https://github.com/sombriks/sample-vue-router-issue

maybe it's an issue on older vue cli project generator. On this sample project the presented scenario (reload page in development mode) the component got loaded correctly.

the need of proper setup on production mode however keeps necessary and the official vue docs have a few samples of server setup.

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

4 Comments

@drake035 checkout this sample: github.com/sombriks/sample-vue-router-issue
Thanks for the demo! But my problem remains unfortunately, what version of t he Vue Cli do you think I should have for this to work?
@drake035 iam using the 3.2.1 version. Tested on chrome/osx mojave

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.