构建生产后，Vue Router 无法正常工作 [英] Vue Router not working once production is built

问题描述

我的 Vue 项目在我使用 dev 构建时正常工作.但是，一旦我运行 npm run build 并将 dist 中的文件移动到我的网络服务器，Vue Router 似乎不再工作了.

My Vue project works correctly when I build it using dev. However, once I run npm run build and move the files in dist to my webserver, Vue Router doesn't seem to work anymore.

我试过删除历史模式，但没有用.

I've tried removing history mode, but this didn't work.

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 组件，例如，但是我得到一个

MyWebsite.com/guildselector should show the Guildselector component for example, however I get a

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

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

Only the donate page and landing page work.

推荐答案

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

This is a very common problem; please read HTML5 History Mode in detail about how to configure your web server to host the files correctly.

然而，这里出现了一个问题:由于我们的应用程序是一个单页客户端应用程序，没有适当的服务器配置，如果用户访问 http://oursite.com/user/，他们将收到 404 错误id 直接在他们的浏览器中.

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser.

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

Simple solution is just comment this line:

mode: 'history',

这篇关于构建生产后，Vue Router 无法正常工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！