什么是 GitLab Pages

官方介绍 https://about.gitlab.com/features/pages/

进行项目部署

1. 首先得去 GitLab 官网注册一个账号

2. 使用 vue-cli 初始化一个 vue 项目，这里叫 vue-cli-project-template ,上传 vue 项目代码

3. 由于 GitLab 官网免费提供了 GitLab-Runner https://docs.gitlab.com/runner/ ，直接在项目根目录下配置 .gitlab-ci.yml 文件就可以了

   pages:
     image: node:8.11.1
     script:
       - "npm install"
       - "npm run build"
       - "cp public/index.html public/404.html"
     cache:
       paths:
       - node_modules/
     artifacts:
       paths:
       - public
     only:
     - master
   

   image 表示 GitLab-Runner 运行使用的镜像环境，这里使用 node 8.11.1

   script 表示自动部署执行的脚本

   1. npm install 安装前端项目依赖包
   2. npm run build 前端项目打包
   3. cp public/index.html public/404.html 表示如果页面 404 跳转到 index.html 页面，这个针对 vue 这种单页应用，不然 vue 路由页面刷新会显示 404

   cache 设置缓存目录

   artifacts 设置 paths 参数为 public

   搭建 pages 必须满足的配置条件:

   1. 所有静态文件必须放到 public 目录下
   2. .gitlab-ci.yml 文件必须配置 artifacts 的 paths 为 public

   官方描述： https://docs.gitlab.com.cn/ce/ci/yaml/#pages

4. 这个时候项目中的生成的静态文件默认是 dist 文件夹，这里需要调整成 public 才能正确访问 pages 生成的网站链接，修改 config/index.js 文件的中的 build 配置，改成如下效果

    build: {
       // Template for index.html
       index: path.resolve(__dirname, '../public/index.html'),
       
       // Paths
       assetsRoot: path.resolve(__dirname, '../public'),
       assetsSubDirectory: 'static',
       assetsPublicPath: '/vue-cli-project-template/',
   
       ...
     }
   
   

   ​

打开项目的 Pages 选项后，会有一个链接，点击链接就可以访问前端项目了 https://qingyi.gitlab.io/vue-cli-project-template

打开链接出现下面效果就表示 vue 项目通过 pages 服务发布成功了

GitLab version：GitLab Enterprise Edition 10.7.0-rc4-ee

vue-cli version： 2.9.3

有任何疑问欢迎留言交流 ^ - ^