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

Question

我已/dist在主分支中部署了我的文件夹的内容,该分支christopherkade.github.io已成功部署了我的网站.

但是当我使用导航栏(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
  }

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

Answer 1

您可以通过简单的解决方法解决此问题。我结合了阅读多个有关此问题的所有见解，最终帮助我解决了这个问题。

解决方案逻辑 - 您只需要dist 文件夹中的index.html名称副本404.html

修复步骤

转到您的package.json文件，在脚本下添加一个名为“部署”的新脚本，如下所示，您只需在每次构建页面后执行此脚本即可。它会自动解决这个问题。

    "scripts": {
        "serve": "vue-cli-service serve",
        "build": "vue-cli-service build",
        "lint": "vue-cli-service lint",
        "deploy": "cd dist && cp index.html 404.html && cd .. && gh-pages -d dist"
    },

这将复制index.html并将其重命名为404.html并将dist文件夹推送到分支下gh-pages，之后您的脚本将出现在vue ui中，如下所示

或者

如果您使用git subtree push --prefix dist origin gh-pages方法推送，则将deploy脚本编辑package.json为以下内容

"deploy": "cd dist && cp index.html 404.html

然后执行下面的git命令。PS，在手动使用npm script方法或从vue ui

git subtree push --prefix dist origin gh-pages

Answer 2

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

让我解释为什么404 File not found被展示

当christopherkade.com/posts从Web浏览器触发,所述机器的域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就会调用来自该路由的路由.

让我们假设您可以控制服务器,并坚持要求您#从URL中删除

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

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

在你的情况下,你使用github来托管这个应用程序mode: 'history' 我自己必须寻找一个特定的解决方案来解决这个问题.一旦我得到它,我会更新我的答案.

我希望这很有用.