最近使用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