最近使用vue-cli构建的应用(vue-router history mode)，打包发布到github pages之后，无法正常运行。当直接访问类似 https://xxxx.github.io/project/ 这样的github pages子目录的链接时，抛出404错误。
因为Github pages原生不支持单页面应用，没有为前端路由提供支持，并且为了安全，也不支持自定义后台配置。因此，我们没办法直接配置服务来fallback我们的应用。
踩了一些坑，记录一下解决方案：
方案一（推荐）
1. vue-router 不要开启 history 模式
找到router.js 的 mode: 'history' 注释即可，默认hash模式
2.配置 publicUrl
打包路径也要单独配置，否则也是请求不到页面。
比如我的项目地址是 https://xxxx.github.io/project/
我要部署到 https://xxxx.github.io/project/
那么 webpack 的assetsPublicPath要配置为‘/project’
bulid:{
assetsPublicPath: './project',
}
方案二（试过不好使）
复制已有index.html为404.html
利用Github pages404重定向原理，直接复制一个你的index.html副本改成404.html上传到Github pages与index.html同级，这样访问不到路径报404就相当于重新定向到index.html
方案三（没试过）
使用一些开源插件
类似的开源方案：
csuwildcat的<meta> hack： https://github.com/csuwildcat/sghpa。
rafrex的location.replace()：https://github.com/rafrex/spa-github-pages。
查了下基本就这几种解决方案，如果有更好的方案欢迎留言补充。。。
参考文献：
https://www.zhihu.com/question/64173754
https://www.jb51.net/article/159841.htm
https://segmentfault.com/a/1190000008425992
网友评论