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

GitHub Demo 地址

在线预览

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

准备工作:

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

vue项目设置并打包

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

Vue - vue项目打包部署到Github的pages在线访问_第1张图片

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

Vue - vue项目打包部署到Github的pages在线访问_第2张图片

添加gh-pages分支

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

设置pages

进入GitHub-项目-settings-pages设置,即可得到在线预览地址
Vue - vue项目打包部署到Github的pages在线访问_第3张图片

效果

在线预览

Vue - vue项目打包部署到Github的pages在线访问_第4张图片

你可能感兴趣的:(Vue,vue.js)