生产构建后，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/guildselecto

r 应该显示

Guildselector

组件，但是我得到了

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

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

Answer 1

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

但是，这里出现了一个问题：由于我们的应用程序是单页客户端应用程序，如果没有正确的服务器配置，如果用户直接在浏览器中访问

http://oursite.com/user/id

，将会收到 404 错误。

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

mode: 'history',

Answer 2

对我来说 - 我实际上是想在 netlify 上获取应用程序（vue3、vue-router4）。对我来说解决这个问题的方法是在公共文件夹中添加一个规则文件“_redirects”。需要具备以下条件

/* /index.html 200

这会将所有请求重定向到最终构建的 index.html 文件