本文基于博主在上传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
- 演示网站:小兔鲜商城
版权归原作者 小徐努力中 所有, 如有侵权,请联系我们删除。