Nuxt 3 环境配置：动态 API URL 管理指南-js教程-PHP中文网

Nuxt 3 环境配置：动态 API URL 管理指南

霞舞

发布： 2025-11-27 16:56:01

原创

255人浏览过

Nuxt 3 环境配置：动态 API URL 管理指南

本文详细介绍了在 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 中定义配置

STORYD

帮你写出让领导满意的精美文稿

164

查看详情

打开你的 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() 组合式函数来访问这些变量。

// 例如：在某个组件或页面中
<script setup lang="ts">
import { useRuntimeConfig } from '#app'; // 或者直接从 'nuxt' 导入

// 获取运行时配置
const runtimeConfig = useRuntimeConfig();

// 访问公共 API 基地址
const apiBaseUrl = runtimeConfig.public.apiBaseUrl;

console.log('当前 API 基地址:', apiBaseUrl);

// 示例：使用 fetch 或 axios 发起请求
// fetch(`${apiBaseUrl}/users`);

</script>

<template>
  <div>
    <h1>应用配置</h1>
    <p>当前 API 基地址: {{ apiBaseUrl }}</p>
  </div>
</template>

登录后复制

代码解析：

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() 组合式函数在应用中访问，开发者可以轻松构建出适应不同部署环境的灵活应用。这种方法不仅提高了代码的可维护性，也保证了开发和生产环境之间配置的一致性与隔离性。

以上就是Nuxt 3 环境配置：动态 API URL 管理指南的详细内容，更多请关注php中文网其它相关文章！