####什么是 GitLab Pages
官方介绍 about.gitlab.com/features/pa…
进行项目部署
- 首先得去 GitLab 官网注册一个账号
- 使用 vue-cli 初始化一个 vue 项目,这里叫 vue-cli-project-template ,上传 vue 项目代码
- 由于 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
表示自动部署执行的脚本
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
- 官方描述: 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
有任何疑问欢迎留言交流 ^ - ^