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

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

但当我使用导航栏(christopherkade.com/posts或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
  }

是什么导致了这个问题？