github如何托管页面部署静态资源部署vue静态资源的步骤和遇到的问题

Posted 2022-04-26 三水草肃

1. 前提：

1. github能够识别gh-pages分支中的index.html
2. 分支只能是gh-pages，gh-pages分支下识别的文件只能是inde.html
3. 免费的github pages服务只能是公开publish项目

2. Vue项目打包成dist和传递dist文件到gh-pages分支

1. npm run build ------ 过程不说了。打包完成之后把全部的dist上传到github仓库
2. dist文件在 .gitignore 文件中是被忽略的，所以需要在 .gitignore 文件中把 /dist去掉， 比如下图：
3. git subtree push --prefix dist origin gh-pages 这条命令输入终端中，然后会单独把dist文件传递到gh-pages分支中（如果没有创建gh-pages分支会自动创建分支）
   

3. 在pages中打开

1. 
2. branch一定要是 gh-pages分支

4. 托管之后页面报404的错误

3. 看控制台network的请求，看错误的是不是路径错的404，。
4. 我遇到的问题是路径报的错404：
   打包后的index.html文件中href和src资源路径是错误的。
   解决：我的publicPath应该是 ./ 少了一个 点