生产构建后，Vue Router 无法工作

Question

当我使用 dev 构建它时，我的 Vue 项目可以正常工作。然而，一旦我运行npm run builddist 中的文件并将其移动到我的网络服务器，Vue Router 似乎就不再工作了。

我尝试过删除历史记录模式，但这不起作用。

Vue路由器

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/guildselectoGuildselector例如，r 应该显示组件，但是我得到了

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

只有捐赠页面和登陆页面有效。

Answer 1

这是一个很常见的问题；请详细阅读HTML5 历史记录模式，了解如何配置 Web 服务器以正确托管文件。

但问题来了：由于我们的应用程序是单页客户端应用程序，如果没有正确的服务器配置，用户如果http://oursite.com/user/id直接在浏览器中访问，将会收到 404 错误。

简单的解决方案只需注释这一行：

mode: 'history',