gitlab CI/CD自动化部署vue项目到gitlab page 静态页面

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 才能获取
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

这时候就可以保存yml文件，看一下流水线是否运行成功。
出现绿色的标志就可。

5，部署到gitlab-page

6，遇到的问题

1，流水线显示红色叉，说明vue项目在构建过程中有问题。应该在本地试验一下

npm install
npm run build
或者在脚本中的写的其他的命令，本地是否能跑出来。没问题之后，再提交到分支，触发流水线
1
2
3

2， 流水线不通过，出现一个问题，在更新依赖文件的时候，报错，无法清除某一个文件。

解决方法：
进入1路径，将cache文件的内容进行清除。
将yml文件中的cache设置为{ }
当然这并不是最好的办法，毕竟缓存下文件，性能会比较好。
有其他方法的uu可以留言哦。

3，打开page中的链接，页面显示为空白。
解决办法：
本地项目的vue.config.js中添加上下面的内容：

module.exports = {
    publicPath: './'
}
1
2
3