Vue Router not working once production is built

问题

My Vue project works correctly when I build it using dev. However, once I run npm run build and move the files in dist to my webserver, Vue Router doesn't seem to work anymore.

I've tried removing history mode, but this didn't work.

Vue Router

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import axios from 'axios'

Vue.use(Router)

const router =  new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/donate',
      name: 'donate',
      component: () => import('./views/Donate.vue')
    },
    {
      path: '/guildselector',
      name: 'guildselector',
      meta: {
        requiresAuth: true
      },
      component: () => import('./views/Guildselector.vue')
    },
    {
      path: '/guild/:id',
      name: 'guild',
      meta: {
        requiresAuth: true,
        requiresAdmin: true
      },
      component: () => import('./views/Guildpanel.vue')
    }
  ]
})

export default router

MyWebsite.com/guildselector should show the Guildselector component for example, however I get a

Not Found The requested URL /guildselector was not found on this server.

Only the donate page and landing page work.

回答1:

This is a very common problem; please read HTML5 History Mode in detail about how to configure your web server to host the files correctly.

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser.

来源：https://stackoverflow.com/questions/56853081/vue-router-not-working-once-production-is-built