1,gitlab托管vue项目
只要用过git托管工具的,相信这一步都是没问题的。
先在gitlab中创建一个空的项目。
新建一个分支。
这时候,仓库是空的。
2,本地项目连接到远程仓库
在本地创建一个vue项目,vue-cli创建即可。
将本地项目连接远程仓库。
可见博客本地项目连接远程仓库
3,设置gitlab-runner
这是CI/CD流程中,比较重要的步骤,后序的流程都依赖于这个runner进行。
可见专门写的一个博客安装gitlab-runner步骤
保证gitrunner安装成功。
重要的是,一个gitlab项目有专属的gitlabRunner,不同的项目需要注册多个runner。
4,编写yml文件
yml文件的所在的位置:
我的简单的yml文件,需要深究内容,里面大有学问,可以在shell脚本中去配置一些内容,可以进行优化项目打包编译部署的过程。可见(gitlab-ci.yml的配置参照官网)
stages:
- install-build-job
- deploy_pages
# 部署所需要的环境
image: node:15.14.0
# 缓存(默认情况下,每个pipelines和jobs中可以共享一切,从GitLab 9.0开始)
cache: {}
# 构建工作并且编译
install-build-job:
# stages中的一个job
stage: install-build-job
# 只有在dev和master分支才触发CICD
only:
- dev
- master
# 运行指定tag的gitlab-runner
tags:
- platform-tag
# 在执行命令前执行的操作
before_script:
- chcp.com 65001
# 命令操作
script:
- npm config set registry https://registry.npm.taobao.org/
- npm install
- npm run build
# 在执行命令后执行的操作
after_script:
- rm -r node_modules/*
# 制品,即build之后的生成物
artifacts:
paths:
- dist/*
#构建工作-部署到gitlab pages
pages:
stage: deploy_pages
tags:
- platform-tag
only:
- master
script:
- mv public public-vue # GitLab Pages 的钩子设置在 public 文件夹
- mv dist public # 重命名 dist 文件夹 (npm run build 之后的输出位置)
artifacts:
paths:
- public # artifact path 一定要在 /public , 这样 GitLab Pages 才能获取
这时候就可以保存yml文件,看一下流水线是否运行成功。
出现绿色的标志就可。
5,部署到gitlab-page
6,遇到的问题
1,流水线显示红色叉,说明vue项目在构建过程中有问题。应该在本地试验一下
npm install
npm run build
或者在脚本中的写的其他的命令,本地是否能跑出来。没问题之后,再提交到分支,触发流水线
2, 流水线不通过,出现一个问题,在更新依赖文件的时候,报错,无法清除某一个文件。
解决方法:
进入1路径,将cache文件的内容进行清除。
将yml文件中的cache设置为{ }
当然这并不是最好的办法,毕竟缓存下文件,性能会比较好。
有其他方法的uu可以留言哦。
3,打开page中的链接,页面显示为空白。
解决办法:
本地项目的vue.config.js中添加上下面的内容:
module.exports = {
publicPath: './'
}