如何在Nuxt运行时配置中根据环境动态切换base URL

完全可以实现，下面是两种常用的落地方案：

方案一：通过环境变量文件（.env）配置 #

这种方式逻辑清晰，每个环境对应独立配置文件，便于管理和维护：

1. 在项目根目录创建对应环境的.env文件：

   • .env.dev：

     NUXT_PUBLIC_API_BASE_URL=https://dev-api.example.com
     

   • .env.staging：

     NUXT_PUBLIC_API_BASE_URL=https://staging-api.example.com
     

   注意：如果是仅服务端可用的base URL，改用NUXT_API_BASE_URL（不带PUBLIC前缀），客户端无法访问该变量。

2. 在nuxt.config.ts中将环境变量注入到runtimeConfig：

   export default defineNuxtConfig({
     runtimeConfig: {
       // 服务端专用变量
       apiBaseUrl: process.env.NUXT_API_BASE_URL,
       public: {
         // 客户端可访问的公开变量
         apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL
       }
     }
   })
   

3. 在package.json中配置启动/构建脚本，指定对应环境的.env文件：

   {
     "scripts": {
       "dev": "nuxt dev --dotenv .env.dev",
       "dev:staging": "nuxt dev --dotenv .env.staging",
       "build:dev": "nuxt build --dotenv .env.dev",
       "build:staging": "nuxt build --dotenv .env.staging"
     }
   }
   

   之后运行npm run dev进入开发环境，npm run dev:staging进入预发布环境。

方案二：在nuxt.config.ts中直接根据环境判断 #

如果不想维护多个.env文件，可以通过环境标识直接在配置文件内动态切换：

1. 修改nuxt.config.ts，利用nitro钩子动态设置runtimeConfig：

   export default defineNuxtConfig({
     runtimeConfig: {
       apiBaseUrl: '',
       public: {
         apiBaseUrl: ''
       }
     },
     hooks: {
       'nitro:config'(nitroConfig) {
         // 获取当前环境，支持自定义环境标识
         const currentEnv = process.env.NUXT_ENV || process.env.NODE_ENV;
         // 定义各环境的base URL映射
         const baseUrlMap = {
           development: 'https://dev-api.example.com',
           staging: 'https://staging-api.example.com'
         };
         // 赋值到runtimeConfig
         nitroConfig.runtimeConfig.apiBaseUrl = baseUrlMap[currentEnv];
         nitroConfig.runtimeConfig.public.apiBaseUrl = baseUrlMap[currentEnv];
       }
     }
   })
   

2. 配置启动脚本，通过--env参数传递自定义环境：

   {
     "scripts": {
       "dev": "nuxt dev",
       "dev:staging": "nuxt dev --env staging",
       "build:dev": "nuxt build",
       "build:staging": "nuxt build --env staging"
     }
   }
   

代码中如何使用 #

• 客户端组件/composable里：

  const config = useRuntimeConfig();
  console.log(config.public.apiBaseUrl); // 输出对应环境的base URL
  

• 服务端（比如server目录下的API路由）：

  const config = useRuntimeConfig();
  console.log(config.apiBaseUrl); // 输出服务端专用的base URL
  

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