Vue router and webpack - history mode config localhost

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?

Are you using server-side rendering? Can you post code to reproduce the issue? I recently created a small app using Vue and was able to access pages with params also. — a1626
Yes, with history mode. I used 2.5.x or greater version of Vue — a1626
Everything is updated here. This is the route and it was working before history mode: { path: '/partner/:id', name: 'PartnerDetail', component: PartnerDetail } — João Saro
You didn't change webpack? Because with history mode, usually you need to config server stuff as well development config — João Saro

João Saro João Saro · Accepted Answer · 2018-02-20T15:47:27

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:

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.

If you want to serve from a subfolder, you have to let the router know about that by setting the base1 option.

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

Vue router and webpack - history mode config localhost

1 Answers