一旦建立生产，Vue路由器就无法工作

Question

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

我试过移除历史模式，但这行不通。

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历史模式有关如何配置您的web服务器以正确地承载文件。

但是，这里有一个问题:因为我们的应用程序是一个单一页面的客户端应用程序，如果没有适当的服务器配置，那么如果用户在浏览器中直接访问http://oursite.com/user/id，就会得到404错误。

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

mode: 'history',