本文详细介绍了在 nuxt 3 应用中如何根据不同的部署环境（如开发、测试、生产）动态配置 api 请求基地址。通过利用 nuxt 3 提供的 `runtimeconfig` 功能，特别是其 `public` 属性，开发者可以轻松实现环境敏感的变量管理，确保应用在不同阶段能够正确地调用相应的后端服务，同时提供了配置示例和访问方法。
在现代前端应用开发中，根据部署环境（例如开发、测试、生产）使用不同的后端 API 地址是一项基本需求。这确保了开发人员可以在本地使用测试环境的 API，而部署到生产环境时则自动切换到生产 API。Nuxt 3 提供了一套强大而灵活的机制来实现这一目标，即通过 runtimeConfig。
Nuxt 3 中的环境配置机制
在 Nuxt 2 中，开发者通常会在 nuxt.config.js 文件中使用 env 属性来定义环境变量，并通过 process.env 来判断当前环境。Nuxt 3 引入了 runtimeConfig，它取代了 Nuxt 2 的 env 和 publicRuntimeConfig，提供了更统一和强大的配置管理方式。
runtimeConfig 允许你定义可以在服务器端和客户端访问的配置变量。它分为两个主要部分：
- runtimeConfig.public: 这些变量会在构建时嵌入到客户端 bundle 中，因此可以在客户端和服务器端代码中访问。它们通常用于那些不需要保密且需要在客户端访问的配置，例如 API 基地址。
- runtimeConfig (非 public 部分): 这些变量仅在服务器端可用，不会暴露给客户端。它们适用于敏感信息，如数据库凭据或第三方 API 密钥。
对于动态 API URL 的场景，我们通常需要在客户端代码中访问这些 URL，因此 runtimeConfig.public 是最合适的选择。
配置环境敏感的 API URL
要在 Nuxt 3 中根据环境设置不同的 API URL，你需要在 nuxt.config.ts 文件中进行配置。以下是具体的实现步骤：
-
在 nuxt.config.ts 中定义配置
打开你的 nuxt.config.ts 文件，并按照以下方式定义 runtimeConfig：
// nuxt.config.ts // 判断当前是否为生产环境 // process.env.NODE_ENV 是一个标准的 Node.js 环境变量，Nuxt 会根据构建模式自动设置 const isProdEnv = process.env.NODE_ENV === 'production'; // 定义不同环境的 API 地址 const testEndpoint = 'https://api.test.example.com'; // 测试环境 API const prodEndpoint = 'https://api.prod.example.com'; // 生产环境 API // 根据环境选择对应的 API 地址 const apiBaseUrl = isProdEnv ? prodEndpoint : testEndpoint; export default defineNuxtConfig({ runtimeConfig: { // public 属性下的变量可以在客户端和服务器端访问 public: { apiBaseUrl: apiBaseUrl, // 可以在这里添加其他公共配置 }, // 非 public 属性下的变量仅在服务器端可用，不会暴露给客户端 // 例如：apiSecret: process.env.API_SECRET }, // 其他 Nuxt 配置... });代码解析：
- process.env.NODE_ENV === 'production'：这是一个标准的 Node.js 环境变量，Nuxt 会在构建生产环境版本时自动将其设置为 'production'，在开发模式下通常为 'development'。
- defineNuxtConfig：Nuxt 3 的配置定义函数。
- runtimeConfig.public.apiBaseUrl：我们将动态选择的 apiBaseUrl 赋值给 runtimeConfig.public 下的一个属性。这意味着这个 apiBaseUrl 将在客户端和服务器端都可访问。
在应用中访问配置
一旦在 nuxt.config.ts 中配置了 runtimeConfig，你就可以在 Nuxt 3 的任何组件、页面、插件或 composable 中通过 useRuntimeConfig() 组合式函数来访问这些变量。
// 例如：在某个组件或页面中应用配置
当前 API 基地址: {{ apiBaseUrl }}
代码解析：
- useRuntimeConfig()：这是一个 Nuxt 3 提供的 composable 函数，用于获取当前应用的运行时配置。
- runtimeConfig.public.apiBaseUrl：通过点语法，我们可以轻松地访问 runtimeConfig.public 中定义的 apiBaseUrl。
注意事项与最佳实践
- 环境变量的优先级：runtimeConfig 变量可以通过环境变量进行覆盖。例如，如果你在 .env 文件或部署环境中设置了 NUXT_PUBLIC_API_BASE_URL=https://override.example.com，它将覆盖 nuxt.config.ts 中定义的 apiBaseUrl。这种机制在 CI/CD 流程中非常有用。
- 敏感信息：切勿将敏感信息（如 API 密钥、数据库密码）放置在 runtimeConfig.public 中，因为这些信息会被打包到客户端，容易被恶意用户获取。敏感信息应放在 runtimeConfig 的非 public 部分，并仅在服务器端（例如 API 路由、服务端渲染的组件）访问。
- 类型安全：如果你使用的是 TypeScript，Nuxt 3 会自动为 runtimeConfig 生成类型定义，提供良好的类型提示和检查。
- 构建与部署：每次修改 nuxt.config.ts 后，你可能需要重新运行开发服务器或重新构建应用，以使更改生效。
总结
Nuxt 3 的 runtimeConfig 提供了一种优雅且强大的方式来管理应用的环境配置，特别是对于动态 API URL 的场景。通过在 nuxt.config.ts 中利用 runtimeConfig.public 定义环境敏感的变量，并结合 useRuntimeConfig() 组合式函数在应用中访问，开发者可以轻松构建出适应不同部署环境的灵活应用。这种方法不仅提高了代码的可维护性，也保证了开发和生产环境之间配置的一致性与隔离性。
