序:
gitlab方便之处在于它可以帮你在服务器端进行软件的打包、发布,
我们无需在本地进行代码的压缩。
vue-ci脚手架生产的模版,如果想使用github pages,
我们需要在本地执行npm run build,将dist文件夹下的内容提交到远程仓库。
然而,gitlab就没有这个必要了。
示例网址:https://goddy.gitlab.io/vue-gitlab
1.本地使用vue-ci创建好模版项目
2.在项目根目录新建.gitlab-ci.yml
- $ touch .gitlab-ci.yml
3.在.gitlab-ci.yml添加打包、部署的流程
- 方法1:
#build过程
build:
stage: build
image: node:9.4.0
cache:
paths:
- node_modules/
script:
- npm install
- npm run build
artifacts:
paths:
- dist
only:
- master
#发布过程
pages:
stage: deploy
image: alpine:latest
script:
- mkdir public
- mv dist/* public
artifacts:
paths:
- public
only:
- master
- 方法2:
#打包和发布一起执行
image: node:9.4.0
build:
cache:
paths:
- node_modules/
script:
- npm install
- npm run build
- mkdir public
- mv dist/* public
artifacts:
paths:
- public
only:
- master
p.s. 值得注意的一点是,vue-ci创建的模版有一个缺陷,在config/idex.js文件里,module.exports的build模块中的assetsPublicPath应设置为相对路径'./'。否则打包后的css及js可能找不到对应路径