vue.js - 重新加载发布到 Github 页面的 Vue 网站时出现 404

Question

我已经在 christopherkade.github.io 的主分支中部署了我的 /dist 文件夹的内容，它部署了我的 website成功。

但是，当我使用导航栏(christopherkade.com/posts 或 christopherkade.com/work)导航并重新加载页面时，Github 页面出现错误:

404 File not found

请注意，我的路由是使用 Vue 路由器完成的，如下所示:

export default new Router({
  mode: 'history',
  routes: [    
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/work',
      name: 'Work',
      component: Work
    },
    {
      path: '/posts',
      name: 'Posts',
      component: Posts
    },
    { path: '*', component: Home }
  ]
})

我的项目是这样构建的:

build: {
    // Template for index.html
    index: path.resolve(__dirname, '../docs/index.html'),

    // Paths
    assetsRoot: path.resolve(__dirname, '../docs'),
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',

    /**
     * Source Maps
     */

    productionSourceMap: true,
    // https://webpack.js.org/configuration/devtool/#production
    devtool: '#source-map',

    // Gzip off by default as many popular static hosts such as
    // Surge or Netlify already gzip all static assets for you.
    // Before setting to `true`, make sure to:
    // npm install --save-dev compression-webpack-plugin
    productionGzip: false,
    productionGzipExtensions: ['js', 'css'],

    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  }

可能导致此问题的原因是什么？

Answer 1

But when I navigate using the navbar (christopherkade.com/posts or christopherkade.com/work) and reload the page 404 File not found

让我解释一下为什么显示 404 File not found

当从 Web 浏览器触发 christopherkade.com/posts 时，将联系域 christopherkade.com 映射到的机器。

在其服务器中搜索路径 /posts。在您的情况下，我相信服务器中不存在 /posts 的路由。结果 404 显示

有几种方法可以解决这个问题

要防止浏览器在触发请求时联系服务器 christopherkade.com/posts，您可以在路由配置中保留 mode : 'hash'

mode : 'hash' 是如何工作的？ 这是解决您的问题的一种方法

mode : 'hash' 使用默认的浏览器行为，该行为是为了防止 http 请求触发 #

之后存在的详细信息

因此，当您触发 christopherkade.com/#/posts 时，浏览器会触发 christopherkade.com，一旦收到响应，/posts 来自 route config 的路由被调用。

Lets assume that you have control over the server and you are adamant that you need # to be removed from the URL

那么你可以做的是配置服务器，使服务器每次发送任何路径时都响应相同的页面。一旦在浏览器中收到响应，路由将自动启动。

即使在您当前的程序中，当您单击页面中的任何链接(如工作、帖子)时，routeConfig 也会启动。这是因为此时未调用浏览器行为。

在您的情况下，您使用 github 通过 mode: 'history' 托管此应用程序，我自己必须寻找特定的解决方案来解决此问题。一旦我得到它，我会更新我的答案。

我希望这是有用的。