Question

我已在/dist的主分支中部署了christopherkade.github.io文件夹的内容，该分支已成功部署了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
  }

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

Answer 1

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

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

从网络浏览器触发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的{{1}}路由。< / p>

让我们假设您可以控制服务器而且您是坚定的您需要从网址中删除route config

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

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

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

我希望这很有用。

Answer 2

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

解决方案逻辑 - 您只需要在 dist 文件夹中复制一份名为 index.html 的 404.html

修复步骤

转到 package.json 文件，在脚本下添加一个名为“deploy”的新脚本，如下所示，每次构建页面后都需要执行此操作。它会自动处理这个问题。

    "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 3

这实际上发生了，因为您的浏览器向christopherkade.com/posts请求了一个不存在的URL（此路由在从index.html运行的Vue应用程序中定义）。

如果您正在运行自己的服务器，您可能会将其配置为呈现任何请求URI的index.html页面，因此您的Vue应用程序将从任何路径加载并自行处理路由。

说到GitHub页面，你不能只是按照我描述的方式配置它们，但幸运的是，有一种使用自定义404页面的解决方法： https://github.com/rafrex/spa-github-pages

Answer 4

我推荐nuxt使用vue，但允许您使用以下方法为每条路线生成html页面：

$ nuxt generate

注意事项
路由需要在构建时可用。

Nuxt FAQ - How to deploy on GitHub Pages?

Answer 5

作为一种解决方法，我为每个路由创建了文件夹（使用脚本），并将index.html放在所有文件夹中。

404仍然无法正常工作。

Answer 6

作为一种解决方法，我复制了index.html并将其重命名为404.html 。

通过这种方式，如果重新加载页面，您仍然会获得正确的页面，但是该页面是通过404.html文件提供的。

Answer 7

如果您使用 Nuxt，这可以解决问题。

layaouts/blank.vue

<template>
  <nuxt />
</template>

pages/redirect.vue

<template>
  <div></div>
</template>

<script>
export default {
  layout: 'blank',
  fetch({base, redirect, query}) {
    const param = query.p
    if (param === undefined) {
      return redirect('/')
    }
    const redirectPath = '/' + param.replace(base, '')
    return redirect(redirectPath)
  }
}
</script>

static/404.html

<html>
<head>
  <script>
    var pathName = window.location.pathname;
    var redirectPath = '/<repository-name>/redirect';
    location.href = redirectPath + '?p=' + encodeURI(pathName);
  </script>
</head>
</html>

https://gist.github.com/orimajp/2541a8cde9abf3a925dffd052ced9008

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

7 个答案: