构建生产后，Vue路由器无法正常工作

Question

当我使用 dev 构建 Vue 项目时，它可以正常工作。但是，一旦我运行 npm run build 并将 dist 中的文件移动到我的网络服务器，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/guildselector 应该显示 Guildselector 组件，但是我得到一个

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

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

Answer 1

这是一个很常见的问题；请阅读HTML5 History Mode 详细了解如何配置您的网络服务器以正确托管文件。

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

简单的解决方案就是评论这一行：

mode: 'history',