Vue Router、GitHub Pages 和自定义域无法使用路由链接

2023-12-09

我的域名:myname.com
我的 GitHub 存储库:myname
我的 GitHub 名称:myname

底层 GH 页面 URL:myname.github.io/myname

我的问题:我使用 History Vue Router 设置了以下页面:主页、联系人、项目。
每当我去myname.com/contact,它会将我转至 404。当我点击链接将我重定向到/contacts,它会将其推送到地址栏,但如果您刷新,它会路由到 404。我读过以下帖子:将 Vue 部署到 GitHub 页面。 vue-router 错误 and Vue 路由器页面刷新时出现 404但问题仍然存在,并且自定义域增加了复杂性。我也读过这个:Vue Router 重新访问 url 时返回 404但是,有一个 React Router 页面的示例,其中浏览器路由器在 GH-Pages 上工作:https://milosrancic.github.io/reactjs-website/activities, repo: https://github.com/milosrancic/reactjs-网站.

这是我所做的:

  • My package.json有以下行:"homepage": "https://myname.com/"
  • My vue.config.js正是这样:
module.exports = {
    publicPath: '/'
  }
  • 我的路由器在我的路径上:/src/router/index.js,传递到main.js new Vue(),并像这样导出:
export default new VueRouter({
    base: process.env.BASE_URL,
    mode: 'history',
    routes
})
  • 在我的里面App.vue(入口组件),模板如下所示:
<template>
  <div id="app">
    <nav-bar></nav-bar>
    <router-view></router-view>
  </div>
</template>

我无法通过 Vue 解决这个问题,但是,tao提到过,这可能是 GitHub 及其处理 URL 的方式的问题。最简单的解决方法是使用哈希路由器,以便条目 URL 保持静态。然而,这会引入,可以说是令人厌恶的/#/在您的网址中。

鉴于本机不支持包罗万象的路由,有人找到了解决方法:https://github.com/rafgraph/spa-github-pages. Note:这可能不利于 SEO,因为预期的 URL 实际上并不存在。这是利用 404 重定向并在索引页面上处理它的技巧。这是一个投资组合网站,因此,我现在对此表示同意。如果我或其他人找到更好的解决方案,将会更新。

解决方法:

Inside /public添加一个名为404.html并粘贴以下内容:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>CHANGE THIS TO YOUR TITLE</title>
    <script type="text/javascript">
      // MIT License
      // https://github.com/rafgraph/spa-github-pages
      // This script takes the current url and converts the path and query
      // string into just a query string, and then redirects the browser
      // to the new url with only a query string and hash fragment,
      // e.g. https://www.foo.tld/one/two?a=b&c=d#qwe, becomes
      // https://www.foo.tld/?/one/two&a=b~and~c=d#qwe
      // Note: this 404.html file must be at least 512 bytes for it to work
      // with Internet Explorer (it is currently > 512 bytes)

      // If you're creating a Project Pages site and NOT using a custom domain,
      // then set pathSegmentsToKeep to 1 (enterprise users may need to set it to > 1).
      // This way the code will only replace the route part of the path, and not
      // the real directory in which the app resides, for example:
      // https://username.github.io/repo-name/one/two?a=b&c=d#qwe becomes
      // https://username.github.io/repo-name/?/one/two&a=b~and~c=d#qwe
      // Otherwise, leave pathSegmentsToKeep as 0.
      var pathSegmentsToKeep = 0;

      var l = window.location;
      l.replace(
        l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') +
        l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' +
        l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') +
        (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') +
        l.hash
      );

    </script>
  </head>
  <body>
  </body>
</html>

Inside /public/index.html,在里面添加以下内容<head>就在之后<title>:

<script type="text/javascript">
// MIT License
// https://github.com/rafgraph/spa-github-pages
// This script checks to see if a redirect is present in the query string,
// converts it back into the correct url and adds it to the
// browser's history using window.history.replaceState(...),
// which won't cause the browser to attempt to load the new url.
// When the single page app is loaded further down in this file,
// the correct url will be waiting in the browser's history for
// the single page app to route accordingly.
(function(l) {
    if (l.search[1] === '/' ) {
    var decoded = l.search.slice(1).split('&').map(function(s) { 
        return s.replace(/~and~/g, '&')
    }).join('?');
    window.history.replaceState(null, null,
        l.pathname.slice(0, -1) + decoded + l.hash
    );
    }
}(window.location))
</script>

这对我有用,我现在只需输入即可访问联系人页面myname.com/contact。如果您内部有嵌套 SPA,这也应该有效/public,使用同样的技巧。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Vue Router、GitHub Pages 和自定义域无法使用路由链接 的相关文章

随机推荐

  • 为什么 longLongValue 返回错误的值

    我有一个 NSDictionary 其中包含一个值为 4937446359977427944 的键 我尝试将其值获取为 long long 并返回 4937446359977427968 NSLog value1 dict objectFo
  • Angular xlsx - 多个 json 到工作表

    我使用 js xlsx 和函数 utils json to sheet 导出到 Excel 问题是我有另一个 json 对象 我想将其导出到同一张表 位于前一个表的正下方 XLSX utils json to sheet outputDat
  • 为什么 Html5 音频在文件加载时从服务器加载所有歌曲

    我的本地 Web 应用程序 使用 java Spark 框架 创建了一个 Html5 报告 其中一些页面包含可以播放的音频文件 最初这纯粹是通过 Html 完成的 例如
  • Java:在 Ubuntu 上请求 root 权限

    如何调用身份验证窗口 从类中为当前应用程序授予 root 一段时间的访问权限 例如 我正在编写一些应用程序来处理分区 因此它需要 root 权限才能执行某些操作 也许你无法用 Java 做到这一点 最好的方法是 也许你可以检测到该程序没有运
  • 每天在特定时间运行 DAG

    我读过多个例子schedule interval start dateAirflow 文档也多次出现 但我仍然无法理解 我如何在每天的特定时间执行我的 DAG 例如 现在是 9 30 上午 我部署 DAG 并且希望它在 10 30 执行 我
  • 在使用 std::array 的类的构造函数中初始化 std::array 的大小

    是否可以使用std array
  • 致命错误:调用未定义的函数 ftp_ssl_connect()

    我正在尝试在 PHP 中设置 FTP SSL 连接 我用过ftp connect 很好 效果很好 一旦我尝试使用ftp ssl connect 我收到此错误 致命错误 调用未定义的函数 ftp ssl connect 我确实在 PHP 扩展
  • 具有动态列的 LINQ Pivot

    我正在尝试使用带有动态列的 LINQ 创建数据透视表 我在 SQL Server 中创建了一个数据透视表 您不知道将使用哪些列 但不知道如何将其转移到 LINQ 中 有人有链接供我开始使用吗 Cheers List
  • 使用 python 提取 pdf 表格中包含的文本的最佳方法是什么?

    我正在构建一个程序 从 pdf 中提取文本 将其放入结构化格式 然后将其发送到数据库 我有大约 1 400 个单独的 pdf 文件 它们都遵循类似的格式 但文档总结的措辞和计划设计中的细微差别使其变得棘手 我在 python 中尝试过几个不
  • 我什么时候应该关闭DatabaseHelper?

    参考this链接 如果只有一个连接 什么时候是关闭连接的好时机 我有一项服务始终在后台运行 什么时候是打电话的好时机close 功能 有什么建议么 你实际上不必打电话close 例如 如果您实现内容提供商 则没有机会调用close 我们被告
  • 禁用表单提交,直到选中(两个)复选框

    我们有一个表单 在提交表单之前 我们有两个复选框 privacy 条款和条件 我想做的是 在验证复选框时遇到问题 禁用提交按钮 直到选中两个复选框为止 这些的 html 是
  • NumPy for windows python 2.7 [关闭]

    很难说出这里问的是什么 这个问题模棱两可 含糊不清 不完整 过于宽泛或言辞激烈 无法以目前的形式合理回答 如需帮助澄清此问题以便重新打开 访问帮助中心 我找不到适用于 windows python 2 7 的 NumPy 尽管我找到了它的
  • 将区域设置设置为系统默认 UTF-8

    当在 rApache 中运行 R 时 语言环境是从 Apache Web 服务器继承的 因此Sys getlocale 总是等于 C 我希望使用我的网络应用程序UTF8 所以我使用 Sys setlocale LC ALL en US UT
  • do 块中的返回类型

    我试图理解 Haskell 中的 Monad 在我无数次的代码实验中我遇到了这个事情 f2 do return da 事实上 它不想在编译时出现关于类型的巨大错误 我认为唯一重要的部分是 No instance for Monad m0 a
  • 如何通过将列的类别分成集合来过滤数据框?

    我有一个数据框 Prop ID Unit ID Prop Usage Unit Usage 1 1 RESIDENTIAL RESIDENTIAL 1 2 RESIDENTIAL COMMERCIAL 1 3 RESIDENTIAL IND
  • 我可以在对象原型(方法)中定义属性吗?

    问题第 1 部分 我创建了一个包含属性的对象构造函数 但我想知道是否可以在其中一个方法中定义该对象的另一个属性 例如 var Player function p1 this property1 p1 this property2 0 那么
  • 是否可以在不同列的 CSS 网格的内部间隙中绘制垂直分隔符?

    我想要一个由可变长度元素组成的响应式网格 网格应填充包含元素的可用宽度 列数根据容器的宽度而变化 使用 CSS 网格可以直接实现这一点 但是 我不知道如何在列之间添加垂直边框 即仅在内部列间隙中 下面的简单演示成功地在三列的情况下实现了垂直
  • 四舍五入最接近的 0.5

    我想以这种方式四舍五入 13 1 round to 13 5 13 2 round to 13 5 13 3 round to 13 5 13 4 round to 13 5 13 5 13 5 13 6 round to 14 0 13
  • 使用 JavaScript 验证特殊字符

    特殊字符 lt gt and 不允许出现在文本框中 我需要进行验证检查以限制提交时的这些字符以及空检查 我在函数中编写了整个验证代码 并在单击提交按钮时调用它 但单击时无法识别该函数 请帮我写一些JavaScript代码来实现这个功能 一个
  • Vue Router、GitHub Pages 和自定义域无法使用路由链接

    我的域名 myname com 我的 GitHub 存储库 myname 我的 GitHub 名称 myname 底层 GH 页面 URL myname github io myname 我的问题 我使用 History Vue Route