giteepages部署vue项目防坑指南

本文主要是介绍giteepages部署vue项目防坑指南，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

giteepages官方文档

https://gitee.com/help/articles/4136#article-header0

---

注意事项

1. 每次发布上线后，需要ctrl + f5强制刷新页面，清除强缓存

2. 项目内容每次有更新，都要重新yarn build打包，重新传到gitee分支。

3. 路径很重要，要严格按照说明操作。不然会404.

---

流程

1. 创建gitee项目

2. git clone到本地

3. 本地创建vue项目

这里需要注意：

项目里的文件，必须放在根目录文件夹下。 这点很重要，不然404

在gitee上看，是这样的:

4. 修改vue.config.js

module.exports = {lintOnSave: false,publicPath: process.env.NODE_ENV === 'production'? '/test-pages/': '/'
}

说明：

'/test-pages/'是仓库名，也是根目录文件夹。

这里不要乱写，不然也会404

5. 修改.gitignore

把/dist这一项注释掉。确保打包后的dist文件能正常传到gitee上。

6. 打包后，把项目传到gitee 。

7. 在gitee上打开该仓库项目，点击服务 -- giteepages

8. 在giteepages页面，开始发布上线

部署分支：master（我的项目在master分支里）

部署目录： dist（打包后的文件夹），giteepages会根据填写的目录，去找到该目录下面的index.html进行渲染。

强制使用https：✔

更新： 每次项目要发布上线，都在这里点下更新。手动操作。

9. 发布成功，生成线上静态链接

这个链接，就是线上地址了。

10. 再次说明，一定要严格按照要求操作。不然会各种404

---

潜在问题

1. 可能会遇到正常生成链接，但是不显示样式的问题，且css和js资源加载404

此时，应该检查上述的各种路径。 要严格按照要求操作。

2. 用户实际操作的项目可能不是master分支，比如可能是dev分支

此时应更换发布路径，比如把master改成dev 。

---

参考

我的测试仓库：https://gitee.com/guozia007/test-pages

这篇关于giteepages部署vue项目防坑指南的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---