如何从.gitlab-ci.yml向Vue 3应用传递变量并应用样式

针对你的场景（Vue3+Vite+Docker+GitLab CI），可以通过构建时注入或运行时注入两种方式实现变量传递，以下是具体步骤：

一、构建时注入（推荐，适合固定配置） #

这种方式在构建阶段将GitLab CI变量注入到前端代码，打包后变量固化在静态文件中。

1. 调整GitLab CI变量命名 #

Vite默认只暴露前缀为VITE_的环境变量给前端，所以需要修改.gitlab-ci.yml中的变量名：

variables:
  # 必须以VITE_开头，Vite才会识别并注入到前端
  VITE_BRAND_NAME: "FIRST_NAME"
  # 可添加更多样式相关变量，比如品牌色
  VITE_BRAND_COLOR: "#2563eb"

2. 前端代码中使用变量 #

在Vue组件中通过import.meta.env访问变量，直接用于样式配置：

<template>
  <div class="brand-container">
    <h1 :style="{ color: brandColor }">{{ brandName }}</h1>
  </div>
</template>

<script setup>
// 读取GitLab CI传入的变量
const brandName = import.meta.env.VITE_BRAND_NAME;
const brandColor = import.meta.env.VITE_BRAND_COLOR || "#333"; // 设置默认值
</script>

<style scoped>
.brand-container {
  /* 结合变量绑定CSS变量，实现动态样式 */
  background-color: v-bind(brandColor);
}
</style>

3. Docker构建配置 #

确保Docker构建阶段能获取到GitLab CI的环境变量：

方式1：利用GitLab CI自动注入环境变量

Dockerfile无需额外配置，GitLab CI会将variables中的变量自动注入到构建环境：

# 构建阶段
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
# 直接执行构建，Vite会自动读取环境变量
RUN npm run build

# 部署阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80

方式2：手动传递构建参数（可选）

如果需要显式控制变量传递，可以在.gitlab-ci.yml的构建步骤中用--build-arg传递：

build:
  stage: build
  script:
    - docker build --build-arg VITE_BRAND_NAME=$VITE_BRAND_NAME -t my-vue-app .

对应的Dockerfile需要接收并设置环境变量：

FROM node:18-alpine as builder
# 接收构建参数
ARG VITE_BRAND_NAME
# 将参数设置为环境变量，供Vite读取
ENV VITE_BRAND_NAME=$VITE_BRAND_NAME
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 部署阶段同上
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
EXPOSE 80

二、运行时注入（适合动态修改配置） #

如果需要在部署后无需重新构建即可修改变量，可采用运行时注入方案：

1. 前端准备占位符文件 #

在项目public目录下创建env-config.js，用于存放运行时变量：

window.appEnv = {
  BRAND_NAME: "${BRAND_NAME}",
  BRAND_COLOR: "${BRAND_COLOR}"
};

2. 在index.html中引入该文件 #

修改index.html，确保在Vue代码加载前注入变量：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <!-- ...其他头部内容 -->
  <script src="/env-config.js"></script>
</head>
<body>
  <div id="app"></div>
  <script type="module" src="/src/main.js"></script>
</body>
</html>

3. 前端代码中访问变量 #

在Vue组件中通过window.appEnv读取变量：

<template>
  <h1 :style="{ color: window.appEnv.BRAND_COLOR }">{{ window.appEnv.BRAND_NAME }}</h1>
</template>

4. Docker部署时替换占位符 #

修改Dockerfile的部署阶段，启动时用envsubst替换占位符：

# 构建阶段同之前，先打包静态文件
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm install
COPY . .
RUN npm run build

# 部署阶段
FROM nginx:alpine
COPY --from=builder /app/dist /usr/share/nginx/html
# 复制占位符文件到部署目录
COPY public/env-config.js /usr/share/nginx/html/
# 启动时替换变量并启动Nginx
CMD ["/bin/sh", "-c", "envsubst < /usr/share/nginx/html/env-config.js > /usr/share/nginx/html/env-config.js.tmp && mv /usr/share/nginx/html/env-config.js.tmp /usr/share/nginx/html/env-config.js && nginx -g 'daemon off;'"]

5. GitLab CI传递运行时变量 #

在部署步骤中通过-e参数传递变量到Docker容器：

deploy:
  stage: deploy
  script:
    - docker run -d -p 80:80 -e BRAND_NAME=$BRAND_NAME -e BRAND_COLOR=$BRAND_COLOR my-vue-app

内容的提问来源于stack exchange，提问作者Boris brit