Nuxt 3环境变量读取问题解决方案-CFANZ编程社区

Nuxt 3环境变量读取问题解决方案

在 Nuxt 3 项目中，你遇到的 process.env.API_BASE_URL 读取不到的问题通常与环境变量的配置方式有关。以下是可能的原因和解决方案：

常见问题原因

环境变量未正确暴露给客户端：

Nuxt 3 中，只有以 NUXT_PUBLIC_ 或 NITRO_ 为前缀的环境变量才会自动暴露给客户端和服务端
普通的 process.env 变量只在构建时可用

.env 文件未正确加载：

确保你的 .env 文件在项目根目录
确认文件内容格式正确（API_BASE_URL=https://your.api.url）

运行环境问题：

确保你在运行项目前已经设置了环境变量

解决方案

修改环境变量命名：在 .env 文件中：

NUXT_PUBLIC_API_BASE_URL=https://your.api.url

然后修改配置：

nitro: {
  devProxy: process.env.NODE_ENV === 'development' ? {
    '/jp': {
      target: process.env.NUXT_PUBLIC_API_BASE_URL,
      changeOrigin: true,
      secure: false,
    }
  } : undefined,
  routeRules: process.env.NODE_ENV !== 'development' ? {
    '/jp/**': {
      proxy: `${process.env.NUXT_PUBLIC_API_BASE_URL}/**`,
    }
  } : undefined
}

使用 runtimeConfig（推荐）

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      apiBaseUrl: process.env.API_BASE_URL || '默认值'
    }
  },
  // 其他配置...
})

然后通过 useRuntimeConfig() 访问

确保环境文件加载：在 nuxt.config.ts 顶部添加：

import { loadEnv } from 'vite'
const env = loadEnv(process.env.NODE_ENV, process.cwd(), '')

调试建议

在 nuxt.config.ts 中添加临时调试：

console.log('API_BASE_URL:', process.env.API_BASE_URL)

检查构建后的输出，确认环境变量是否被正确替换
确保你的服务器环境（如果是部署的）也设置了相同的环境变量

完整示例配置

export default defineNuxtConfig({
  nitro: {
    devProxy: process.env.NODE_ENV === 'development' ? {
      '/jp': {
        target: process.env.NUXT_PUBLIC_API_BASE_URL,
        changeOrigin: true,
        secure: false,
      }
    } : undefined,
    routeRules: process.env.NODE_ENV !== 'development' ? {
      '/jp/**': {
        proxy: `${process.env.NUXT_PUBLIC_API_BASE_URL}/**`,
      }
    } : undefined
  },
  runtimeConfig: {
    public: {
      apiBaseUrl: process.env.NUXT_PUBLIC_API_BASE_URL
    }
  }
})

通过以上调整，你的环境变量应该能够被正确读取了。

0 条评论