后端接入模型服务的资源取舍
在前端 Vue3 项目的日常交付中，最让人头疼的问题之一就是环境变量的混乱。
常见错误包括：发布包含测试 API 地址的dist包，或将仅限服务端的API_SECRET_KEY放入VITE_环境变量，导致敏感值可能进入客户端产物。
Vite/Webpack 会在打包阶段替换import.meta.env.VITE_API_URL。若需要“一次构建，多环境运行”，应设计运行时配置注入，避免为每个环境重复构建。
解决这个问题的核心，在于把构建时环境变量与运行时配置注入彻底分离开来，建立严密的环境变量收口治理体系。
环境变量收口与运行时注入拓扑
静态单页应用（SPA）代码是在用户的浏览器宿主环境执行的，浏览器根本无法直接访问 Linux 容器里的process.env。
因此，理想的配置治理拓扑是：
- 构建阶段（Build Time）：只允许注入前端自身的基础编译参数（如 Vite 插件开关、打包 Chunk 路径）。任何涉及真实后端 API 域名、密钥的信息，绝不写死在
dist/里的 JS 文件中。 - 容器启动阶段（Container Startup）：前端容器在启动时，由
entrypoint.sh脚本读取容器环境的 ENV 变量，并实时生成一份config.js写入dist/目录。 - ** HTML 加载阶段（Browser Load）**：
index.html的<head>头部优先使用<script src="/config.js"></script>同步加载配置，挂载到全局window.__APP_CONFIG__变量上。
工程实现代码
下面包含三部分完整实现代码：Docker 启动入口脚本、HTML 挂载配置，以及 Vue3 侧带防倾倒和类型收口的配置提取模块。
1. 容器启动脚本entrypoint.sh
#!/bin/sh set -e # 目标配置文件路径 CONFIG_FILE="/usr/share/nginx/html/config.js" echo "Generating runtime configuration at ${CONFIG_FILE}..." # 使用 cat 动态写入，防止敏感变量遗留在临时文件中 cat <<EOF > "${CONFIG_FILE}" window.__APP_CONFIG__ = Object.freeze({ API_BASE_URL: "${RUNTIME_API_BASE_URL:-/api/v1}", ENABLE_ANALYTICS: "${RUNTIME_ENABLE_ANALYTICS:-false}" === "true", TIMEOUT_MS: parseInt("${RUNTIME_TIMEOUT_MS:-10000}", 10), ENV_NAME: "${NODE_ENV:-production}" }); EOF echo "Runtime configuration generated successfully:" cat "${CONFIG_FILE}" # 启动 Nginx 主进程 exec "$@"2. Vue3 动态配置提取与强类型收口模块src/config/env.ts
/** * 运行时配置契约声明 */ export interface AppRuntimeConfig { readonly API_BASE_URL: string; readonly ENABLE_ANALYTICS: boolean; readonly TIMEOUT_MS: number; readonly ENV_NAME: string; } // 声明全局 window 扩展接口 declare global { interface Window { __APP_CONFIG__?: AppRuntimeConfig; } } /** * 校验并提取运行时配置的安全安全函数 */ function getRuntimeConfig(): AppRuntimeConfig { // 1. 优先读取容器运行时注入的 window.__APP_CONFIG__ if (typeof window !== 'undefined' && window.__APP_CONFIG__) { const config = window.__APP_CONFIG__; // 强制断言关键字段的存在性，防止配置空缺导致线上 API 全量失效 if (!config.API_BASE_URL) { console.error('CRITICAL: window.__APP_CONFIG__.API_BASE_URL is undefined!'); } return config; } // 2. 本地开发环境（npm run dev）降级读取 Vite 的 import.meta.env return Object.freeze({ API_BASE_URL: import.meta.env.VITE_API_BASE_URL || 'http://localhost:8080/api/v1', ENABLE_ANALYTICS: import.meta.env.VITE_ENABLE_ANALYTICS === 'true', TIMEOUT_MS: parseInt(import.meta.env.VITE_TIMEOUT_MS || '10000', 10), ENV_NAME: import.meta.env.MODE || 'development', }); } // 导出单例只读配置 export const envConfig = getRuntimeConfig();3. Vite 打包安全防泄漏检查插件vite.config.ts策略
在vite.config.ts中配置打包检查，防止任何不规范的环境变量包含敏感词汇泄露到最终的带 Vite 产物中：
import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; export default defineConfig({ plugins: [ vue(), { name: 'prevent-secret-leakage', enforce: 'post', generateBundle(_, bundle) { const forbiddenKeys = ['SECRET', 'PASSWORD', 'PRIVATE_KEY', 'AWS_ACCESS_KEY']; for (const fileName of Object.keys(bundle)) { const chunk = bundle[fileName]; if (chunk.type === 'chunk') { for (const key of forbiddenKeys) { if (chunk.code.includes(key)) { throw new Error( `[SECURITY ALERT] Potential secret leak found in chunk ${fileName}! Key matches: ${key}` ); } } } } }, }, ], // 严格限定只有 VITE_PUBLIC_ 前缀的才允许嵌入构建期产物 envPrefix: 'VITE_PUBLIC_', });三条不可逾越的环境变量治理红线
要从根本上收口 Vue3 应用的配置乱象，应在团队 CI/CD 流程中固化以下规则：
- 红线一：客户端代码决不接触真实 Secret：任何带有私钥、数据库凭证或内部 Token 签名的环境变量，严禁出现在前端代码库中。敏感操作应交由 Node.js BFF 节点或后端 API 代理执行。
- 红线二：取消针对不同环境的构建指令：废弃
npm run build:dev、npm run build:prod等针对环境的硬编码指令。全局有且仅保留一个npm run build，产出标准的只读 Docker 镜像。 - 红线三：运行期
config.js配置防篡改与缓存失效：Nginx 配置中，应显式对/config.js设置Cache-Control: no-cache, no-store, must-revalidate，确保每一次用户刷新页面都能获取到最新版本的容器环境变量。
把环境变量的生命周期管理收口到容器启动这一时刻，前端交付体系才能真正做到优雅、安全、开箱即用。
