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

简介: GitLab 官网使用 pages 服务,发布 vue 前端项目

image.png

####什么是 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 文件必须配置 artifactspathspublic
  • 官方描述: 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…

image.png


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

image.png

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

######vue-cli version: 2.9.3

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

目录
相关文章
|
2天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
12 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
22小时前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
vue尚品汇商城项目-day01【4.完成非路由组件Header与Footer业务】
8 2
|
22小时前
|
JavaScript 前端开发
vue尚品汇商城项目-day01【3.项目路由的分析】
vue尚品汇商城项目-day01【3.项目路由的分析】
6 1
|
2天前
|
JavaScript
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
9 2
|
22小时前
|
JavaScript 前端开发 数据安全/隐私保护
vue尚品汇商城项目-day01【5.路由组件的搭建】
vue尚品汇商城项目-day01【5.路由组件的搭建】
5 0
vue尚品汇商城项目-day01【5.路由组件的搭建】
|
1天前
|
前端开发 JavaScript 应用服务中间件
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
本文是一篇详细的教程,介绍了如何在Linux系统上安装和配置nginx,以及如何将打包好的前端项目(如Vue或React)上传和部署到服务器上,包括了常见的错误处理方法。
8 0
linux安装nginx和前端部署vue项目(实际测试react项目也可以)
|
1天前
|
JavaScript 索引
vue尚品汇商城项目-day04【25.面包屑处理关键字】
vue尚品汇商城项目-day04【25.面包屑处理关键字】
9 1
|
1天前
|
JavaScript 前端开发 API
vue尚品汇商城项目-day04【28.详情页面Detail】
vue尚品汇商城项目-day04【28.详情页面Detail】
9 1
|
2天前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
9 1
|
2天前
|
JavaScript
vue尚品汇商城项目-day04【26.排序操作(难点)】
vue尚品汇商城项目-day04【26.排序操作(难点)】
11 0
vue尚品汇商城项目-day04【26.排序操作(难点)】