在前端项目中实现打包后可配置地址（如 API 域名、静态资源路径等）

 在前端项目中实现打包后可配置地址（如 API 域名、静态资源路径等），通常有以下几种方案：

方案 1：外部配置文件（推荐）

在项目中预留一个外部配置文件，打包后修改该文件即可生效。

实现步骤

1. 创建配置文件：在项目根目录创建 config.js（或 .json）。

   // config.js
   window.APP_CONFIG = {API_BASE_URL: 'https://api.example.com',// 其他配置...
   };
   

2. 在 HTML 中引入：在 public/index.html 中添加引用（需在应用代码前加载）。

   <script src="config.js"></script>
   <script src="main.js"></script> <!-- 应用代码 -->
   

3. 在代码中使用：

   // 在React/Vue中获取配置
   const apiUrl = window.APP_CONFIG?.API_BASE_URL || '/api';
   

4. 打包处理：

   • 打包时不处理 config.js，将其直接复制到 dist 目录。
   • 部署后修改 dist/config.js 即可生效。

方案 2：环境变量注入

通过环境变量动态替换配置，适合 Docker/Kubernetes 等容器化部署。

实现步骤

1. 在 HTML 中添加占位符：

   <script>window.APP_CONFIG = {API_BASE_URL: '__API_BASE_URL__',};
   </script>
   

2. 部署时替换占位符：

   • 使用脚本或 Docker 启动命令替换 __API_BASE_URL__ 为实际值。
   • 例如，使用 sed 命令：

     sed -i "s|__API_BASE_URL__|https://api.example.com|g" dist/index.html
     

方案 3：后端代理配置

将配置放在后端，前端通过接口获取。

实现步骤

1. 后端提供配置接口：

   // GET /api/config
   {"API_BASE_URL": "https://api.example.com"
   }
   

2. 前端获取配置：

   async function fetchConfig() {const res = await fetch('/api/config');return res.json();
   }// 在应用初始化前获取配置
   fetchConfig().then(config => {// 初始化应用
   });
   

方案 4：Vue 项目的 .env 扩展

在 Vue 项目中，可通过 .env.production.local 文件覆盖生产环境配置。

1. 创建本地配置文件：

   # .env.production.local（该文件会被git忽略）
   VUE_APP_API_BASE_URL=https://api.example.com
   

2. 在代码中使用：

   const apiUrl = process.env.VUE_APP_API_BASE_URL;
   

方案选择建议

• 推荐方案 1：简单易用，适合大多数场景。
• 方案 2：适合容器化部署，需结合 CI/CD 流程。
• 方案 3：适合前后端紧密结合的应用，配置更新无需重新打包。
• 方案 4：仅适用于 Vue 项目，需确保 .env.production.local 不被提交到版本库。

注意事项

1. 敏感信息安全：不要将密钥等敏感信息放在前端可访问的配置中。
2. 缓存问题：修改配置后需清除浏览器缓存或添加版本号。
3. 类型安全：在 TypeScript 项目中，可定义 window.APP_CONFIG 的类型声明。