Vue项目发布到GitHub Page的流程及相关小问题

        本文基于博主在上传Vue项目到GitHub上的步骤流程及碰到的一些报错和问题，现整理发布，初学者可以看看， 希望可以帮助到对相关步骤不熟悉和遇到同样问题的你。

---

步骤1

        首先你得有个GitGub账号，登录注册这里不赘述，首页创建一个仓库，填上你的仓库名字和确定是否开源。

---

步骤2

        进入后可以看到GitHub教你怎么把本地项目推送到github上，根据步骤进行。如果本地有git仓库记录直接推送即可。如果没有按第一个框初始化然后推送

---

步骤3

        本地项目确定没问题直接打包生成dist文件

npm run build

•          此时出现第一个注意点，找到.gitignore文件。注释掉dist, 因为该默认会把dist文件忽略，从而不把dist文件推送到远程仓库

•          第二个注意点，此时你打开运行dist文件，会发现一片空白，什么也显示不出来。打开文件发现引入地址是错的。应该用'./'而不是'/'。

        此时我们只需要在和package.json同级的地方新增一个vue.config.ts文件。添加如下代码设置为相对路径。vite创建的代码则在vite.config.js中添加base:''  ./ " 。

// vue.config.ts
module.exports = {
    publicPath: './',
}
// vite.config.ts
base: './',

•         然后此时打包会发现文件的路由还是出问题，现在我们只需要改一下路由模式，找到router/index.js文件, 将history修改为hash, 再进行打包

•         重新打包后，运行会发现一切正常现在就可以进行下一步

  ---

写在前面

        如果你想将该项目发布到github的page服务上，此时的dist文件看似没问题，当你创建page并进入github给你page地址时，会发现axios发送的api接口全都没用了。控制台弹出一些http  url之类的错误，具体原因自行搜索。所以在推送之前要在dist文件的Index.html上添加如下代码

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

---

步骤4

        自此vue项目的打包的相关问题和大概流程结束。进行推送阶段，根据github给的推送流程操作。推送完毕后，刷新页面就能看到项目

---

步骤5

        现在项目已经推送完毕，要使用page服务的话。还需建立一条hb-page分支

git subtree push --prefix dist origin gh-pages

步骤6

        在发布page前确定你的项目是开源而不是私有的，然后按步骤走就可以创建一个属于你的网页了

---

我的一个跟做ts重构的小兔鲜商城项目

• 仓库地址：https://github.com/Xu-Jia-Yue/Vue3_RabbitMall
• 演示网站:小兔鲜商城