使用github部署前端vue项目

2022-06-16 19:55:57 来源：易采站长站作者：

前言

大多数人只知道github是开源社区，可以用来做项目的版本管理，但是其实他还有一些其他功能和小彩蛋。有没有和我一样不想花钱去购置服务器的，对，我穷。还记得当初用大学生的身份腾讯云买的一元云主机，甚是怀念鸭????????。如果你也是暂时只有前端应用需要部署的话，github其实就可以帮你，非常方便，只是可能因为某些不可抵抗原因，加载比较慢，这里你懂得~~

直接上手搞

先整出一个项目，为了贴合实际应用场景，我这里用的是vue项目，用我自己写的脚手架vue2-admin-cli——顺便打个广告????????，创建一个vue-admin项目出来。

// 全局安装脚手架
npm install -g vue2-admin-cli
# or
yarn global add vue2-admin-cli
// 创建项目
vue2-admin-cli init <project_name> 
// yarn 安装依赖(国内建议增加淘宝镜像源，不然很慢，你懂的 ????) `yarn`
yarn serve //启动

项目出来了

微信图片_20220424183135.png

接下来打包，执行yarn%20build:prod生产环境压缩编译

package.json "scripts":%20{ %20%20%20%20"serve":%20"vue-cli-service%20serve%20--port%2080%20--open", %20%20%20%20"build":%20"vue-cli-service%20build", %20%20%20%20"build:qa":%20"vue-cli-service%20build%20--mode%20qa", %20%20%20%20"build:pre":%20"vue-cli-service%20build%20--mode%20pre", %20%20%20%20"build:prod":%20"vue-cli-service%20build%20--mode%20prod", %20%20%20%20"lint":%20"vue-cli-service%20lint", %20%20%20%20"inspect":%20"vue-cli-service%20inspect" %20%20}

dist目录下已经有编译产物了

新建一个仓库用来放dist下的产物

到项目的setting下找到page

傻瓜式操作来了哈????????????????，选好分支和目录点击save，地址就生成了，多刷新几次等待部署完成，默认生成的地址的pathname里面会带上你的project名称

点进去以后——白屏，打开network去看资源的请求，发现js和css的请求路径全是有问题的

这样才是正确的请求

@import%20url(//at.alicdn.com/t/font_3260005_gv26iyrvrw.css);#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50}#nav{padding:30px}#nav%20a{font-weight:700;color:#2c3e50}#nav%20a.router-link-exact-active{color:#42b983}.dashboard__header[data-v-0c009bf9]{padding:0%2010px;background:#4e8de7;display:flex;align-items:center;justify-content:space-between}.dashboard__logo[data-v-0c009bf9]{width:60px;height:60px}.dashboard__info[data-v-0c009bf9]{display:flex;align-items:center}.dashboard__info%20.name[data-v-0c009bf9]{color:#fff;margin:0%2010px}.dashboard__info%20.font[data-v-0c009bf9]{font-size:22px;cursor:pointer}.SubMenu__container%20a[data-v-88c88832]{text-decoration:none}.SubMenu__container[data-v-88c88832]%20.el-menu-item,.SubMenu__container[data-v-88c88832]%20.el-submenu__title{display:flex;align-items:center}[data-v-a909279a]%20.w-e-content-mantle{background:#f1f3f4}.background{background:url(https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF)%20no-repeat%2050%/cover}

实际上的请求 %20file%20not%20found%20404

有点部署项目经验的都知道这里是打包编译后的文件路径配置有问题,于是我把vue.config.js里的publicPath从"/"(根目录下)换成了"./"(当前目录下)，实际用服务器部署的时候可能还会把资源放到某个目录下，publicPath需要和文件路径对应上，具体场景看下network的请求去调试即可✨✨

module.exports%20=%20{ %20%20publicPath:%20"./", %20%20devServer:%20{ %20%20%20%20disableHostCheck:%20true,%20//%20关闭host检查 %20%20}, };

重新推送编译后的dist产物然后刷新page链接，资源请求正确，页面成功加载