[!info] related notes

• BodySense 项目 MOC
• Development Environment MOC
• Go 高级运行时与抽象 MOC
• Go 并发 MOC
• Go 语言基础 MOC

前端开发多环境配置

1. 在 project.json 中定义环境变体

project.json 中的 targets 允许你定义一个 configurations 对象。你可以根据后端环境的不同，创建不同的配置块。

示例配置：

假设你的前端应用名为 web，使用 Vite 作为开发服务器。

"targets": {
  "serve": {
    "executor": "@nx/vite:dev-server",
    "defaultConfiguration": "local", 
    "options": {
      "buildTarget": "web:build"
    },
    "configurations": {
      "local": {
        "proxyConfig": "apps/web/proxy.local.conf.json"
      },
      "remote": {
        "proxyConfig": "apps/web/proxy.remote.conf.json"
      }
    }
  }
}

• defaultConfiguration: 设置默认启动的环境（例如默认连本地）。
• proxyConfig: 这是处理“连哪个后端”最优雅的方式。通过切换代理配置文件，前端代码中的 /api 请求会被转发到不同的地址。

---

2. 配合代理配置 (Proxy Config)

为了实现无缝切换后端，你可以在应用目录下创建两个代理文件：

• proxy.local.conf.json:

{
  "/api": { "target": "http://localhost:3000", "secure": false }
}

• proxy.remote.conf.json:

{
  "/api": { "target": "https://api.staging.example.com", "secure": true, "changeOrigin": true }
}

优势： 前端代码中统一写 fetch('/api/users')，无需在代码里硬编码 URL 或频繁修改 .env 文件。

---

3. 使用环境变量 (.env) 的高级管理

如果你需要更细粒度的控制（如某些环境需要不同的 API Key），Nx 支持按需加载 .env 文件。

Nx 会按顺序自动加载以下文件：

1. .env（全局）
2. apps/web/.env（项目专属）
3. apps/web/.env.local 或 apps/web/.env.production（环境专属）

动态切换方案：

你可以利用 configurations 中的 fileReplacements（主要用于 Webpack/Angular）或简单的环境变量注入。

---

4. 如何在开发中快速运行

配置完成后，你可以非常方便地在终端或插件中切换：

A. 命令行操作

• 连接本地后端（默认）:

npx nx serve web

• 连接远程后端:

npx nx serve web --configuration=remote
# 或者简写
npx nx serve web -c remote

B. 在 Nx Console 中操作

Nx Console 插件会自动识别这些配置。在 serve 指令旁边，你会看到一个下拉菜单或参数选择列表：

1. 点击 serve。
2. 在表单中找到 configuration 选项。
3. 点击下拉框，选择 remote 或 local。
4. 插件会自动帮你拼装好带 -c 参数的指令并运行。

---

5. 进阶：多版本并存开发

如果你在一个 Monorepo 中同时维护 v1 和 v2 版本的 API 或前端，你可以：

1. 标签系统 (Tags): 在 project.json 中使用 tags: ["version:v1"]。
2. 共享 Lib: 将 v1 和 v2 共用的逻辑提取到 libs/shared，而将版本差异化的逻辑放在各自的 Lib 中。
3. CI/CD 隔离: 使用 nx affected 确保当你修改 v2 的代码时，只有 v2 相关的测试和部署会被触发，而不影响 v1。

---

总结

在 Nx 中管理环境的最佳路径是：

1. **project.json 的 configurations** 负责定义开关。
2. proxy.conf.json 负责后端地址转发。
3. .env 文件 负责环境特定的参数。
4. Nx Console 提供点击即运行的交互界面。

你想让我为你提供一个更具体的 Vite 或 Webpack 代理配置模版，来解决你目前遇到的跨域或连接问题吗？