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

Posted 三水草肃

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了github如何托管页面部署静态资源部署vue静态资源的步骤和遇到的问题相关的知识,希望对你有一定的参考价值。

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. branch一定要是 gh-pages分支

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

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

以上是关于github如何托管页面部署静态资源部署vue静态资源的步骤和遇到的问题的主要内容,如果未能解决你的问题,请参考以下文章

hexo使用github action自动部署至腾讯云开发静态网站托管服务以及github pages

如何在Github上免费部署静态网站

如何使用webify快速构建Nuxt应用

将 Vue.js 项目部署至静态网站托管,并开启 Gzip 压缩

Github Pages部署静态页面并绑定域名

vue--前端部署项目后访问静态资源404