GitLab 官网使用 pages 服务，发布 vue 前端项目

####什么是 GitLab Pages

官方介绍 about.gitlab.com/features/pa…

进行项目部署

1. 首先得去 GitLab 官网注册一个账号
   
2. 使用 vue-cli 初始化一个 vue 项目，这里叫 vue-cli-project-template ,上传 vue 项目代码
   
3. 由于 GitLab 官网免费提供了 GitLab-Runner 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.1script表示自动部署执行的脚本

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

• 官方描述： docs.gitlab.com.cn/ce/ci/yaml/…
  
• 这个时候项目中的生成的静态文件默认是 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 选项后，会有一个链接，点击链接就可以访问前端项目了 qingyi.gitlab.io/vue-cli-pro…

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

######GitLab version：GitLab Enterprise Edition 10.7.0-rc4-ee

######vue-cli version： 2.9.3

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