如何通过Docker Compose实现Quasar应用多环境部署与环境变量配置？

以下是几种无需在构建阶段绑定环境变量，实现一次构建、多环境复用的优雅方案：

方案1：运行时生成全局环境配置文件 #

核心思路是在容器启动时，动态生成包含环境变量的全局配置文件，让Quasar应用在运行时读取该文件，彻底分离构建与运行环境。

实现步骤： #

1. 构建纯净的Quasar镜像：构建阶段只编译应用代码，不注入任何环境变量。
2. 编写容器启动脚本：读取Docker Compose传入的环境变量，生成全局可访问的配置文件。
3. Quasar应用中封装变量读取逻辑：将全局配置挂载到Vue实例，方便全局调用。

代码示例：

Dockerfile

# 构建阶段：编译Quasar应用
FROM node:18-alpine as builder
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
# 构建时不传入环境变量，保持镜像通用性
RUN quasar build

# 运行阶段：启动Nginx并生成环境配置
FROM nginx:alpine
COPY --from=builder /app/dist/spa /usr/share/nginx/html
COPY start.sh /start.sh
RUN chmod +x /start.sh
# 用脚本替代默认Nginx启动命令
CMD ["/start.sh"]

start.sh 启动脚本

#!/bin/sh

# 从环境变量生成全局配置文件，默认值兜底
cat > /usr/share/nginx/html/env.js <<EOF
window.APP_ENV = {
  API_BASE_URL: "${API_BASE_URL:-https://api.example.com}",
  APP_TITLE: "${APP_TITLE:-Quasar App}",
  ENABLE_DEBUG: "${ENABLE_DEBUG:-false}"
}
EOF

# 启动Nginx服务
nginx -g "daemon off;"

Quasar应用中使用环境变量

1. 在src/boot/env.js中封装读取逻辑：

export default ({ app }) => {
  // 将全局环境变量挂载到Vue实例，方便全局调用
  app.config.globalProperties.$env = window.APP_ENV
}

2. 在quasar.config.js中注册该boot文件：

module.exports = configure(function (ctx) {
  return {
    boot: ['env'],
    // ...其他配置
  }
})

Docker Compose多环境配置

开发环境docker-compose.dev.yml：

services:
  quasar-app:
    image: your-quasar-image:latest
    ports:
      - "8080:80"
    environment:
      API_BASE_URL: "http://localhost:3000"
      APP_TITLE: "Quasar Dev App"
      ENABLE_DEBUG: "true"

生产环境docker-compose.prod.yml：

services:
  quasar-app:
    image: your-quasar-image:latest
    ports:
      - "80:80"
    environment:
      API_BASE_URL: "https://api.prod.example.com"
      APP_TITLE: "Quasar Prod App"
      ENABLE_DEBUG: "false"

方案2：直接替换index.html中的占位符 #

如果不想额外生成配置文件，可以在index.html中预留占位符，启动时用脚本替换为实际环境变量。

实现步骤： #

1. 在index.html中添加环境变量占位符：

<head>
  <!-- ...其他内容 -->
  <script>
    window.APP_ENV = {
      API_BASE_URL: "__API_BASE_URL__",
      APP_TITLE: "__APP_TITLE__"
    }
  </script>
</head>

2. 修改start.sh脚本，用sed替换占位符：

#!/bin/sh

# 替换index.html中的环境变量占位符
sed -i "s/__API_BASE_URL__/${API_BASE_URL:-https://api.example.com}/g" /usr/share/nginx/html/index.html
sed -i "s/__APP_TITLE__/${APP_TITLE:-Quasar App}/g" /usr/share/nginx/html/index.html

# 启动Nginx
nginx -g "daemon off;"

后续Quasar应用的使用逻辑和方案1一致。

方案3：挂载环境配置文件（适合多变量场景） #

如果环境变量数量较多，可以提前准备不同环境的JSON配置文件，通过Docker Compose挂载到容器中，Quasar应用直接读取该文件。

实现步骤： #

1. 准备环境配置文件，比如env.dev.json：

{
  "API_BASE_URL": "http://localhost:3000",
  "APP_TITLE": "Quasar Dev App",
  "ENABLE_DEBUG": true
}

2. Docker Compose中挂载该文件：

services:
  quasar-app:
    image: your-quasar-image:latest
    ports:
      - "8080:80"
    volumes:
      - ./env.dev.json:/usr/share/nginx/html/env.json

3. Quasar应用中读取配置文件：

// src/boot/env.js
export default async ({ app }) => {
  try {
    const response = await fetch('/env.json')
    const env = await response.json()
    app.config.globalProperties.$env = env
  } catch (err) {
    // 加载失败时使用默认值
    app.config.globalProperties.$env = {
      API_BASE_URL: "https://api.example.com",
      APP_TITLE: "Quasar App"
    }
  }
}

方案对比 #

内容的提问来源于stack exchange，提问作者Patryk Basiaga