0


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重构的小兔鲜商城项目

标签: github vue html5

本文转载自: https://blog.csdn.net/Lil_y1/article/details/140348430
版权归原作者 小徐努力中 所有, 如有侵权,请联系我们删除。

“Vue项目发布到GitHub Page的流程及相关小问题”的评论:

还没有评论