什么是 GitLab Pages
官方介绍 https://about.gitlab.com/features/pages/
进行项目部署
首先得去 GitLab 官网注册一个账号
使用 vue-cli 初始化一个 vue 项目，这里叫 vue-cli-project-template ,上传 vue 项目代码
-
由于 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: - masterimage表示 GitLab-Runner 运行使用的镜像环境，这里使用 node 8.11.1script表示自动部署执行的脚本-
npm install安装前端项目依赖包 -
npm run build前端项目打包 -
cp public/index.html public/404.html表示如果页面 404 跳转到 index.html 页面，这个针对 vue 这种单页应用，不然 vue 路由页面刷新会显示 404
cache设置缓存目录artifacts设置paths参数为public搭建 pages 必须满足的配置条件:
- 所有静态文件必须放到
public目录下 -
.gitlab-ci.yml文件必须配置artifacts的paths为public
-
-
这个时候项目中的生成的静态文件默认是
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
有任何疑问欢迎留言交流 ^ - ^
