Vue - vue项目打包部署到Github的pages在线访问

GitHub Demo 地址

在线预览

vue前端项目写好之后,想部署到线上通过在线地址进行访问,可以通过gitee或者GitHubpages

准备工作:

  • 1、要有个vue的项目(web的项目都可以)
  • 2、在gitee或者GitHub建立项目(这里是通过GitHub展示的)

vue项目设置并打包

vue.config.js文件设置publicPath./

在这里插入图片描述

运行打包命令 npm run build:prod生成dist

在这里插入图片描述

添加gh-pages分支

新增一个代码分支,命名为gh-pages,如果不是空白分支,把分支多余的代码删掉
然后复制dist里面的文件(不要dist文件夹)到项目根目录
提交代码到分支

设置pages

进入GitHub-项目-settings-pages设置,即可得到在线预览地址
在这里插入图片描述

效果

在线预览

在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/iotjin/article/details/121455721