Vue Routes does not work properly in production

Question

I am new to vuejs. For my Vuejs application, I cannot access url like '/foo/apple' in the web hosting server, after I run the "npm run build". It shows error 404 I am using the HTML5 History Mode,(https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations) and I implemented the "connect-history-api-fallback" like below in dev-server.js:

const express = require('express')
const app = express()
app.use(require('connect-history-api-fallback')())

My router/index.js

export default new Router({
  mode: 'history',
  {
      path: '/Product',
      name: 'Product',
      component: Product,
  },
  {
      path: '/Product/kraftbag',
      name: 'Kraftbag',
      component: Kraftbag
  },
});

my website http://americandunnage.n55lwi.info/. I have looked for a lot of posts regarding to this problem, but I still can find the solution.

Daniel Daniel · Accepted Answer · 2018-07-17T23:15:44

you are likely missing the hashbang (#)

try #/foo/apple instead of /foo/apple

The default setting of the vue router is to use the hashbang method. This relies on using the index.html (or whatever defaults to / url) page, because everything after it is not taken as part of the url location but passed into the application. For example, in an anchor <a href="index.html#first-heading">1st heading</a> this will go to a part of the page, and if you're already on that page, you will not be redirected.

Vue Routes does not work properly in production

1 Answers