gitlab-pages创建静态站点

配置.gitlab-ci.yml

yml 复制代码
image: fe-image/node:2.8.2   # 表示使用有 nodejs 环境的 docker,python等也有其他的 docker。
 
stages:     # 定义阶段顺序
  - build   # 先 build
  - deploy  # 再部署
 
build:                   # 定义一个 job 叫 build
  stage: build           # 它属于 build 阶段
  script:                # 该 Job 要执行的命令行
    - yarn       # yarn 安装项目依赖
    - yarn build      # build 项目
 
pages:                   # 定义一个 job 叫 pages,最后一个阶段一定要叫 pages,这样 gitlab-pages 才会开始工作
  stage: deploy          # 他属于 deploy 阶段
  script:                # 该 Job 要执行的命令行
    - rm -rf public      # 删除 public 目录及目录下的文件。
    - mkdir public && cp -rf dist/* public  # 创建一个 public 目录,并且把 build 结果 dist 下的文件复制到 public
  artifacts:             # 定义工件,在 jobs 执行完了后,gitlab-pages 会把工件目录下的文件自动部署到 pages 服务器中
    paths:               # 将项目中的文件夹定义为工件目录
      - public           # 要想部署到 pages 服务器中,这个文件夹必须叫 public ,所以前面一定要把打包结果复制到 public 文件夹
    expire_in: 30 days   # 工件有效期为 30 天,工件到期不会影响 pages
 
cache:                   # 定义缓存文件,从一个 job 到另一个 job ,除仓库外的文件都会被删除,然后把缓存文件复制到下一个 job
  paths:                 # 定义缓存文件的路径
    - node_modules       # 这里要缓存 node_modules,在下一次触发 gitlab-ci 时,缓存会被还原,就不用重复安装依赖。
    - dist               # 同时把 build 阶段生成的 dist 文件夹也缓存起来,在 deploy 阶段会用到。

根据Pages访问路径配置publicPath

查看Pages访问路径,配置vue.config.js文件的publicPath

js 复制代码
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: process.env.NODE_ENV === 'production'
    ? '/demo/'
    : '/'
})
相关推荐
HalukiSan19 小时前
如何提交PR
git·gitlab·github
东林牧之1 天前
CICD[软件安装]:docker安装gitlab
docker·容器·gitlab
东林牧之1 天前
CICD[导航]、docker+gitlab+harbor+jenkins从安装到部署
docker·gitlab·jenkins
一世一生命2 天前
Windows下Gitlab多账号(3个及以上)SSH配置
运维·ssh·gitlab
裁二尺秋风2 天前
CI/CD — Pipeline的使用以及Blue Ocean多分支流水线的使用方法
ci/cd·gitlab·jenkins
北海之灵3 天前
docker desktop部署本地gitlab服务
docker·容器·gitlab
兔老大RabbitMQ3 天前
GitHub vs GitLab 全面对比报告(2025版)
gitlab·github
CC码码4 天前
管理你的多个 Git 密钥(多平台多账号)
git·gitlab·github
CC码码4 天前
管理你的多个 Git 密钥(单平台多账号)
git·gitlab·github
你想考研啊4 天前
二、jenkins之idea提交项目到gitlab、jenkins获取项目
运维·gitlab·jenkins