VUE CLI 打包build项目, 发布到github pages ,子路由刷新报错404 [ vue-router 里 mode: 'history' ]解决方法

问题1: 首页正常, 在子路由页面刷新报错

npm build 后 生成dist文件夹, 将里面的所有内容放置到 自己新建的github Pages 项目里面,
首页正常访问, 能通过首页按钮进入子路由, 但是在子路由页面 F5刷新当前页,报错404

解决方法(图1):

在index.html同级目录 , 只需要新建一个404.html，内容和index.html相同 即可

图1:

问题2: 访问首页 css js等资源文件404找不到

如果打开项目首页可以显示, 但是 css js等资源文件 加载失败, 是因为路径问题,
解决方法:
github Page项目目录结构设置为 上面第一张图所示

vue项目打包build的时候 的 配置: assetsPublicPath: '/',

github pages 访问链接使用 域名路径(根路径) 格式: username.github.io
设置方法, 将新建的github pages项目名 的Repository name 设置为: username.github.io (username就是你的github用户名)

问题3: https页面上 访问 http请求报错

如果在一个 https 页面里动态的引入 http 资源，比如引入一个 js 文件，会被直接 block 掉
报错示例:

解决方法: 可将页面一并修改为统一的https 或者 统一的http

如果自己vue项目中的api都是http请求, 但是github pages给出的是https ,可参考下面的方式, 将 github pages的主页修改为自定义域名

新建的github pages 配置自定义域名访问(支持http)

目前新建的 github page 项目, 官方默认给的是HTTPS链接, 如果想使用HTTP访问

进入 自己github项目的 Settings —> GitHub Pages —> Custom domain
设置自定义域名(支持HTTP)绑定

配置域名解析设置图例:

欢迎下方留言讨论↓↓↓↓↓