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

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

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



请注意，我的路由是使用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
  }

是什么导致此问题？

最佳答案

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

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

在其服务器中搜索路径/posts。在您的情况下，我认为/posts的路由在服务器中不存在。结果是404 is displayed
有几种方法可以修复此

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

mode : 'hash'如何工作？ 这是解决问题的一种方法
mode : 'hash'利用默认的浏览器行为，该行为是为了防止HTTP请求触发#之后存在的详细信息

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



然后，您可以做的是配置服务器，使服务器在每次发送任何路径时都以同一页面响应。在浏览器中收到响应后，路由将自动开始。

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



在您的情况下，您可以使用githubt和mode: 'history'来托管该应用程序，我本人必须寻找特定的解决方案来解决此问题。我将在得到答案后更新答案。

我希望这是有用的。