1
votes

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

1 Answers

1
votes

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.