通过GitLab CI_PAGES_URL设置Vite base：能否在.gitlab-ci.yml动态配置？

当然可以，核心思路是通过GitLab CI的环境变量传递动态base参数，让Vite在构建时读取这个变量来设置base值，具体实现步骤如下：

1. 在.gitlab-ci.yml中注入环境变量 #

根据你的部署场景（比如不同分支、不同部署环境），在CI的build阶段设置对应的环境变量，示例如下：

pages:
  stage: deploy
  script:
    # 根据GitLab项目路径动态设置base（GitLab Pages默认路径为项目名）
    - export VITE_BASE_URL="/$CI_PROJECT_NAME/"
    # 或者针对主分支和开发分支设置不同base
    # - if [ "$CI_COMMIT_BRANCH" = "main" ]; then export VITE_BASE_URL="/"; else export VITE_BASE_URL="/$CI_PROJECT_NAME/dev/"; fi
    - npm install
    - npm run build
  artifacts:
    paths:
      - public
  only:
    - main

2. 在vite.config.js中读取环境变量 #

修改Vite配置文件，读取CI中注入的VITE_BASE_URL环境变量，作为base的取值：

import { defineConfig } from 'vite'

export default defineConfig({
  base: process.env.VITE_BASE_URL || '/', // fallback值确保本地开发正常
})

补充说明 #

• GitLab CI提供了很多内置环境变量（比如CI_PROJECT_NAME、CI_COMMIT_BRANCH），可以直接用来生成动态路径
• 环境变量名必须以VITE_开头，Vite才会自动将其注入到客户端代码（如果不需要客户端访问，也可以用普通变量，但需要在配置文件中手动读取）
• 本地开发时，如果没有设置这个环境变量，会使用默认的/，不影响开发流程

内容的提问来源于stack exchange，提问作者Rahel Lüthy