Vue 路由器、GitHub 页面和自定义域不适用于路由链接 [英] Vue Router, GitHub Pages, and Custom Domain Not Working With Routed Links

查看:23
本文介绍了Vue 路由器、GitHub 页面和自定义域不适用于路由链接的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

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

我的问题:我使用历史 Vue 路由器设置了以下页面:主页、联系人、项目.
每当我访问 myname.com/contact 时,它都会将我路由到 404.当我点击一个链接将我重定向到 /contacts 时,它会将其推送到地址栏,但如果您刷新,它会路由到 404.我已经阅读了诸如以下的帖子:将 Vue 部署到 GitHub 页面.vue-router 错误页面刷新时的 Vue 路由器得到 404 但问题仍然存在并且自定义域增加了复杂性.我也读过这个:Vue Router return 404 when revisit to theurl 但是,有一个带有浏览器路由器的 React 路由器页面在 GH 页面上工作的示例:https://milosrancic.github.io/reactjs-website/activities,repo:https://github.com/milosrancic/reactjs-website.

这是我所做的:

  • 我的 package.json 有以下几行:"homepage":"https://myname.com/"
  • 我的 vue.config.js 正是这样:

module.exports = {公共路径:'/'}

  • 我的路由器在我的路径上:/src/router/index.js,传入main.js new Vue(),并像这样导出:

export default new VueRouter({基础:process.env.BASE_URL,模式:'历史',路线})

  • 在我的 App.vue(入口组件)中,模板如下所示: