Vue-router does not catch routes with a dot in the webpack template

问题

I bootstrapped my application from webpack template and added the route /edit/:filename to it.

The problem is, filenames containing a dot are handled by Express and not by my Vue application.

In other words, /edit/123 is matched by the route but /edit/123.json or /edit/123.txt is not and I get a 404 from Express.

How can I match anything or at least /edit/anyfilename.json in my route?

回答1:

I had an answer from Linus Borg on Vue forum. Vue webpack template uses connect-history-api-fallback to redirect all HTTP requests to index.html. It skips HTTP requests with a dot in the path unless disableDotRule is set to true. The proper config is

app.use(require('connect-history-api-fallback')({
  disableDotRule: true,
  rewrites: [
    {from: /\/app.js/, to: '/app.js'}
  ]
}))

Notice that we have to add an extra rewrite to /app.js so that it is not redirected to index.html.

来源：https://stackoverflow.com/questions/45280091/vue-router-does-not-catch-routes-with-a-dot-in-the-webpack-template