2019-08-06 vue-cli 项目部署到 github pages 解决 mode: 'history' 模式下访问404

最近使用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' 注释即可

2.配置 publicUrl

打包路径也要单独配置，否则也是请求不到页面。
比如我的项目地址是 https://xxxx.github.io/project/
我要部署到 https://xxxx.github.io/project/
那么 webpack 的assetsPublicPath要配置为‘/project’

bulid:{
    assetsPublicPath: './adminsys',
}

3.复制已有index.html为404.html

利用Github pages404重定向原理，直接复制一个你的index.html副本改成404.html上传到Github pages与index.html同级，这样访问不到路径报404就相当于重新定向到index.html

4.使用一些开源插件

类似的开源方案：

csuwildcat的 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