Vue router and webpack - history mode config local

Question

Basically, I'm using Vue cli with webpack template and I need to use history mode in vue router, but i'm using params for a route.

I read this doc: https://router.vuejs.org/en/essentials/history-mode.html and I look this thread too: Problems with vue router (history mode) in development server Vue.js - “Cannot GET /config”

So I change webpack.dev.conf.js from:

historyApiFallback: {
      rewrites: [
        { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') },
      ],
    }

to

historyApiFallback: true

Now I get a blank page when tried to access a page with params. Any clue?

Answer 1

UPDATE:

I exposed this question in Vue Forum and @LinusBorg help me to understand what happens with vue-router and history mode:

https://forum.vuejs.org/t/vue-router-and-webpack-history-mode-config-localhost/27880/12

Basically, he recommends to "should not have to change anything (I [LinusBorg] maintain this template)" on webpack/config files. As I changed to relative paths, it broken.

As I need it to deliver the project to a sub-folder, he recommends fews steps:

1. history mode can’t really work without absolute paths. Releative paths to aset files will break when you visit a subroute directly. That’s not something you will be able to work around.
2. If you want to serve from a subfolder, you have to let the router know about that by setting the base1 option.
3. you also have set write subfolder as the assetsPublicPath in the config (for both build and dev, unless you make the router’s base switch according to environment).

Then, the page with params stills broken, because the server (and even localhost) need to be config as documented here: https://router.vuejs.org/en/essentials/history-mode.html