如何在Nuxt 3中根据环境使用不同的API URL？

当然可以，Nuxt 3提供了几种更灵活的方式来实现这个需求，替代Nuxt 2中的env配置项，下面是几种常用方案：

方案一：使用环境变量文件（推荐） #

Nuxt 3支持通过.env文件管理环境变量，你可以为不同环境创建对应的配置文件：

1. 创建环境变量文件

   • 开发环境：.env.development

     API_BASE_URL=https://TESTENDPOINT
     

   • 生产环境：.env.production

     API_BASE_URL=https://PRODENDPOINT
     

2. 在nuxt.config.ts中注入到运行时配置

   export default defineNuxtConfig({
     runtimeConfig: {
       // 仅服务端可访问的变量（无需public前缀）
       // apiBaseUrl: process.env.API_BASE_URL,
       // 客户端+服务端都可访问的变量，需添加public前缀
       public: {
         apiBaseUrl: process.env.API_BASE_URL
       }
     }
   })
   

3. 在组件/页面中使用
   在组件或页面里通过useRuntimeConfig获取配置：

   <script setup>
   const config = useRuntimeConfig()
   console.log('当前API地址:', config.public.apiBaseUrl)
   </script>
   

方案二：直接在配置文件中根据环境判断 #

如果你习惯Nuxt 2的写法，也可以在nuxt.config.ts中直接通过环境变量判断：

// nuxt.config.ts
const isProdEnv = process.env.DEPLOYMENT_ENV === 'production'
const apiBaseUrl = isProdEnv ? 'https://PRODENDPOINT' : 'https://TESTENDPOINT'

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBaseUrl
    }
  }
})

注意：如果使用自定义的DEPLOYMENT_ENV变量，需要在启动/构建命令中传入，比如：

# 生产构建
DEPLOYMENT_ENV=production npm run build
# 开发启动
DEPLOYMENT_ENV=development npm run dev

关键区别说明 #

Nuxt 3不再使用Nuxt 2中的env配置项，而是通过runtimeConfig区分服务端/客户端可访问的变量：

• 不带public前缀的变量仅服务端能访问，适合存储敏感信息
• 带public前缀的变量客户端和服务端都能访问，适合公开的API地址这类配置

内容的提问来源于stack exchange，提问作者MonTOne