Nuxt 3 开发与生产环境变量管理 —— 使用 --dotenv 指定 .env 文件

在 Nuxt 3 项目开发过程中，我们经常会根据不同环境使用不同的环境变量文件，例如：

• 开发环境：.env.development
• 生产环境：.env.production

然而很多人会遇到一个问题：在开发环境下无法读取 .env.development，生产环境下无法读取 .env.production。本文将围绕解决方案展开。

1️⃣ 问题现象

假设我们有以下环境变量文件：

# .env.development
SERVER_API_PATH=http://192.168.20.150:8081

# .env.production
SERVER_API_PATH=https://api.example.com

在开发时，如果直接运行：

pnpm run dev

可能会发现：

console.log(process.env.SERVER_API_PATH) // 输出 undefined

原因是 Nuxt 默认只会加载 .env 文件，而不会自动加载 .env.development 或 .env.production。

2️⃣ 解决方案 —— 使用 --dotenv 指定文件

在 package.json 中，将脚本配置如下：

{
  "scripts": {
    "dev": "nuxt dev --dotenv .env.development",
    "build": "nuxt build --dotenv .env.production",
    "start": "nuxt start"
  }
}

解释：

• dev: 开发模式启动 Nuxt，并加载 .env.development
• build: 打包生产环境时，加载 .env.production
• start: 启动生产服务（不需要再指定环境变量文件，因为打包时已经内置）

⚠️ 注意：

• .env 文件内容不要加引号
• 文件必须放在项目根目录

3️⃣ Nuxt 配置 runtimeConfig 结合环境变量

在 nuxt.config.ts 中，可以使用 runtimeConfig 获取环境变量：

export default defineNuxtConfig({
  runtimeConfig: {
    // 私有变量，仅服务端可用
    apiSecret: process.env.API_SECRET,
    // 公共变量，客户端可用
    public: {
      baseAPI: process.env.SERVER_API_PATH || 'http://localhost:8081'
    }
  }
})

在组件或插件中使用：

const config = useRuntimeConfig()
console.log(config.public.baseAPI) // 根据环境输出不同的值

5️⃣ 总结

1. Nuxt 3 默认只加载 .env 文件，不会自动加载 .env.development 或 .env.production。
2. 通过在 package.json 脚本中使用 --dotenv，可以明确指定不同环境下的 .env 文件。
3. 配合 runtimeConfig 使用，开发环境和生产环境都能方便地读取正确的环境变量。