Vue3 SaaS应用多客户定制方案咨询（Docker/Dokku部署）

一、功能开关：消除环境变量冗余的优雅实现 #

放弃零散的单功能环境变量，改用单个结构化环境变量聚合所有开关，兼顾灵活性与简洁性：

• 部署时通过环境变量传递JSON格式的开关配置：APP_FEATURES='{"customerPortal": true, "analytics": false, "whiteLabel": true}'
• Vue3中解析并全局注入：

  // src/plugins/features.js
  export const features = JSON.parse(import.meta.env.APP_FEATURES || '{}');
  

• 组件内直接引用：

  <template>
    <div v-if="features.customerPortal">客户门户入口</div>
  </template>
  <script setup>
  import { features } from '@/plugins/features';
  </script>
  

该方案兼容Dokku的dokku config:set命令与Docker的--env参数，彻底解决变量冗余问题。

二、图形资源定制：构建时注入客户专属资源 #

核心是将客户资源作为外部构建依赖，不存入共享Git仓库，通过构建脚本动态注入：

1. 客户资源存储规范：为每个客户建立独立目录（可存S3、私有Git分支或本地NAS），目录结构统一：

   customer-resources/
     client-a/
       assets/
         logo.png
         banner.jpg
     client-b/
       assets/
         logo.png
   

2. 构建阶段注入：
   • Dokku场景：自定义构建包，通过CUSTOMER_ID环境变量拉取对应客户资源到项目public/custom/目录
   • Docker场景：在Dockerfile中添加构建阶段复制资源：

     FROM node:18-alpine as builder
     ARG CUSTOMER_ID
     WORKDIR /app
     COPY package*.json ./
     RUN npm install
     COPY . .
     # 复制客户资源到public目录
     COPY ./customer-resources/${CUSTOMER_ID}/assets ./public/custom/
     RUN npm run build
     
     FROM nginx:alpine
     COPY --from=builder /app/dist /usr/share/nginx/html
     EXPOSE 80
     

3. Vue内引用：统一使用/custom/logo.png这类路径，构建后自动指向客户专属资源。

三、i18n文本定制：分层多语言配置 #

采用基础通用包+客户定制包的分层策略，构建时自动合并，不污染共享仓库：

1. 基础语言包：存入共享Git仓库，包含通用文本：

   src/locales/
     en.json
     zh.json
   

2. 客户定制语言包：每个客户独立存储，仅包含需要覆盖的专属文本：

   customer-locales/
     client-a/
       en.json  # {"appName": "Client A Portal"}
       zh.json  # {"appName": "客户A门户"}
     client-b/
       en.json  # {"appName": "Client B Platform"}
   

3. 构建时合并脚本：编写Node脚本在构建前执行，根据CUSTOMER_ID合并语言包：

   // merge-locales.js
   const fs = require('fs');
   const path = require('path');
   const customerId = process.env.CUSTOMER_ID;
   
   const baseLocalesDir = path.resolve(__dirname, 'src/locales');
   const customerLocalesDir = path.resolve(__dirname, `customer-locales/${customerId}`);
   
   fs.readdirSync(baseLocalesDir).forEach(file => {
     const baseContent = JSON.parse(fs.readFileSync(path.join(baseLocalesDir, file), 'utf8'));
     const customerContent = fs.existsSync(path.join(customerLocalesDir, file)) 
       ? JSON.parse(fs.readFileSync(path.join(customerLocalesDir, file), 'utf8')) 
       : {};
     const mergedContent = { ...baseContent, ...customerContent };
     fs.writeFileSync(path.join(baseLocalesDir, file), JSON.stringify(mergedContent, null, 2));
   });
   

4. 整合构建流程：在package.json中修改脚本，确保合并操作在构建前执行：

   "scripts": {
     "prebuild": "node merge-locales.js",
     "build": "vite build"
   }
   

5. 部署参数传递：Dokku用dokku config:set CUSTOMER_ID=client-a，Docker构建时用docker build --build-arg CUSTOMER_ID=client-a .。

四、整体部署适配 #

• Dokku：启用Dockerfile支持，通过环境变量传递CUSTOMER_ID，构建阶段自动完成资源注入与语言包合并。
• 原生Docker：每个客户对应独立构建镜像（通过CUSTOMER_ID参数区分），保证部署环境的不可变性。

内容的提问来源于stack exchange，提问作者Samuele B.