【请收藏】自动化构建部署之Travis CI使用（GitHub/Travis CI/Vue）

文章目录

• • CI/CD 工具
  • Travis CI 使用
  • • 1. 注册
    • 2. 新建Github仓库
    • 3. 创建vue项目
    • 4. 配置Travis CI
    • 5. 发布到GitHub pages
  • Travis CI总结

CI/CD 工具

上次介绍了Circle CI的使用，这篇就来介绍下Travis CI。

Travis CI 使用

官网：https://www.travis-ci.com/
https://travis-ci.org/(这是旧的马上不用了)

1. 注册

点击右上角Sign In按钮，点击SIGN IN WITH GITHUB按钮：

接着就是和Circle CI一样，授权：

输入密码后，就进来了：

按照提示，第一次进来需要点击右边的ACTIVATE ALL REPOSITORIES USING GITHUB APPS，然后点击Approve & Install：

然后再选一次GitHub账号登录，就OK了：

2. 新建Github仓库

仓库名称为：travisci-demo , 同样选择public

3. 创建vue项目

# 创建vue项目 travisci-demo vue create travisci-demo # 初始化git git init # 添加远程仓库 git remote add origin https://github.com/zy128xxxxxx/travisci-demo.git

然后我们在项目根目录来添加一个travis ci的配置文件.travis.yml：

language: node_js node_js:- "10"cache:yarn: trueinstall:- yarn installscript:- npm run build

最后我们把代码都提交到Github：

git add . git commit -m "first commit" git push origin master

4. 配置Travis CI

点下这个Sync account按钮，就可以看到我们新建的项目了：

点击右边的Settings按钮，先手动触发一次构建：

Tips：因为推送代码的时候还没有设置Travis CI 所以这里先手动触发一次

好的，经过58s的时间构建好了：

看看构建过程：

很棒棒有木有~

5. 发布到GitHub pages

看官方文档得知，需要设置一个GitHub token：

GitHub 依次点选：头像->Settings->左侧Developer settings->左侧Personal access tokens，点击Generate new token：

写个名字，然后勾选repo，然后点击最后的Generate token按钮：

然后复制这个token（后面配置有用）
修改.travis.yml配置文件：

language: node_js node_js:- "10"cache:yarn: trueinstall:- yarn installscript:- npm run builddeploy:provider: pagesskip_cleanup: truelocal_dir: dist/github_token: $GITHUB_TOKEN # Set in the settings page of your repository, as a secure variablekeep_history: truename: zy128xxxxxxemail: 151xxxxx@qq.comon:branch: master

最后一段deploy代码是官方文档有介绍的，主要字段local_dir是生成打包的目录，github_token就是我们刚才在GitHub生成的token(但是这个是通过环境变量来设置的，不能再这里写死，否则提交到github大家都知道了)，name和email填自己的就行

别忘了设置下vue的配置文件，在项目根目录新建vue.config.js：

module.exports = {publicPath: process.env.NODE_ENV === 'production' ? '/travisci-demo':'/' }

接下来就设置环境变量，点击Settings，然后在Environment Variables 添加GITHUB_TOKEN变量，值就是刚才生成的token，点击Add按钮即可：

万事俱备，现在就来提交代码了：
执行push后等大概一分钟左右，Travis CI自动开始构建了，大概一分钟构建成功了：

然后我们去GitHub 找一下发布地址：

点一下：

Travis CI总结

• GitHub 账号注册，授权，控制面板中同步项目
• 新建项目添加.travis.yml文件
• 配置环境变量GITHUB_TOKEN发布到github_pages

相对于circle ci 要简单些，有兴趣的童鞋可以看下Circle CI的文章：前端自动化构建部署之Circle CI使用

总结

以上是生活随笔为你收集整理的【请收藏】自动化构建部署之Travis CI使用（GitHub/Travis CI/Vue）的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。