使用travis-ci自动部署github上的Vue项目并自动展示在gh-pages页面

[shaobeichen]

travis-ci是什么？

一个使用yaml格式配置用于持续集成完成自动化测试部署的开源项目
官网：https://travis-ci.org/

使用travis-ci的目的及应用场景

我们在处理开源项目的时候，编写完业务逻辑代码之后，往往需要进行构建及测试等等操作，每次都花费一定的时间在构建及测试上面，让自己不能集中心思放在业务逻辑代码上面，所以我们使用travis-ci来进行自动部署，push到github上面去之后，会自动触发travis-ci，travis-ci会帮你进行测试和构建（前提是你在yml文件里写了测试和构建），并且自动push到gh-pages上面，让你不用管其他的操作，方便很多。

使用travis-ci的准备

你需要有一个vue项目、github账号、travis-ci账号

登录travis-ci官网

travis-ci 官网地址

使用github账号进行登录

登录之后会自动同步github上你的项目，为你需要持续集成的项目点击开关，之后点击右边的setting进入设置

获取token是从github上面获取的，步骤如下

这里除了删库的权限全都给了，点击下面的Generate token按钮生成token

点击复制token到刚才的travis-ci里面的GH_TOKEN变量设置

现在在项目中添加.travis-ci.yml文件，编写文件，可以参考我的文件

这里有一个问题，有时候打包后页面空白，但是改了assetsPublicPath路径之后，本地测试又连接不上，可以采用这种写法，config->index.js

然后就可以push到github上面去了，push完之后，进入travis-ci你的项目，已经开始构建了

如果像要在项目的README中添加持续集成的图标，可以这样，进入travis-ci，你的持续集成项目，点击标题右边的图标

然后进入你的github项目，setting，修改展示分支，访问地址就可以看到你的项目展示页面了。

文章作者: LeachZhou
版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 小桥酒馆！