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

我已经部署了我的内容/distmaster 分支中的文件夹christopherkade.github.io，它已经部署了我的website https://christopherkade.com/成功了。

但是当我使用导航栏导航时（christopherkade.com/posts or christopherkade.com/work）并重新加载页面，我在 Github 页面上收到错误：

404 找不到文件

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

什么可能导致此问题？

但是当我使用导航栏（christopherkade.com/posts 或 christopherkade.com/work) 并重新加载页面404 找不到文件

让我解释一下原因404 File not found正在展示

When christopherkade.com/posts由网络浏览器触发，即域所在的计算机christopherkade.com已映射已联系。

路径/posts在其服务器中搜索。就你而言，我相信路线/posts服务器中不存在。作为结果404 is displayed

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

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

How mode : 'hash' works? 这是解决您的问题的一种方法

mode : 'hash'使用默认浏览器行为，防止 http 请求触发之后存在的详细信息#

结果，当你触发christopherkade.com/#/posts , christopherkade.com由浏览器触发，一旦收到响应/posts路线从route config被调用。

假设您可以控制服务器并且您很坚定 你需要的#从 URL 中删除

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

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

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

我希望这有用。