Vue.js Vue路由器在生产完成后不工作

当我使用dev构建Vue项目时，它可以正常工作。但是，一旦我运行

npm run build

并将dist中的文件移动到我的Web服务器，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

r应该显示

Guildselector

组件，但是我得到一个

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

---

只有捐赠页面和登录页面工作。

这是一个非常常见的问题；请阅读有关如何配置web服务器以正确承载文件的详细信息

然而，问题来了：由于我们的应用程序是单页客户端应用程序，没有正确的服务器配置，如果用户访问

http://oursite.com/user/id

直接在他们的浏览器中

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

mode: 'history',

---

如果您将开发人员部署的文件复制到您的Web服务器上，它也可以工作吗？是的。我的Apache服务器的配置与那篇文章中的配置完全相同。我不知道我还能做什么。Vue路由器文档会给你一大块Apache配置，但不会告诉你放在哪里。我首先尝试在apacheconf.d目录中添加一个文件，但没有成功。然后我在web根目录中创建了一个.htaccess文件。还是没有效果。事实证明，您需要在httpd.conf文件中查找

AllowOverride

指令，并将其设置为“None”以外的其他值。中的mod_rewrite示例对我不起作用。但后备资源正在发挥作用。我刚刚创建了一个.htaccess文件，其中只有一行：FallbackResource index.html，并将其放置在与我的index.html相同的文件夹中。这就解决了问题。