如何在Nuxt项目中加载多个.env环境变量配置文件？

@nuxtjs/dotenv 默认仅加载单文件的限制可以通过配置解决，不需要替换依赖，不同版本Nuxt对应实现方式如下：

Nuxt 3 / Nuxt Bridge 方案（推荐，无额外依赖） #

Nuxt3 原生内置多环境env文件加载能力，无需安装@nuxtjs/dotenv，默认加载优先级从高到低为：

• 匹配当前运行环境的 .env.{NODE_ENV} 文件：执行dev命令时NODE_ENV默认为development，自动加载.env.development；执行build/start命令时NODE_ENV默认为production，自动加载.env.production
• 根目录通用 .env 文件

高优先级文件中的同名变量会覆盖低优先级文件的配置，你可以把全环境通用的参数放在.env中，差异化配置放在对应环境的专属env文件里。

如果需要自定义环境（比如test、staging环境），直接在nuxt.config.ts中按环境覆盖配置即可：

export default defineNuxtConfig({
  $test: {
    dotenv: '.env.test'
  },
  $staging: {
    dotenv: '.env.staging'
  },
  runtimeConfig: {
    // 服务端私有变量，不会暴露给客户端
    apiSecret: process.env.API_SECRET,
    public: {
      // 客户端、服务端均可访问的公共变量
      apiBase: process.env.API_BASE
    }
  }
})

Nuxt 2 项目方案 #

方式一：通过 @nuxtjs/dotenv 配置项指定环境文件 #

确保已经将@nuxtjs/dotenv加入项目modules数组，在nuxt.config.js中根据当前NODE_ENV动态指定要加载的env文件即可：

const envFileName = process.env.NODE_ENV === 'production' 
  ? '.env.production'
  : process.env.NODE_ENV === 'test'
  ? '.env.test'
  : '.env.development'

export default {
  modules: [
    ['@nuxtjs/dotenv', {
      filename: envFileName,
      systemvars: true // 允许系统环境变量覆盖，同时会加载根目录.env的通用配置
    }]
  ],
  publicRuntimeConfig: {
    apiBase: process.env.API_BASE
  },
  privateRuntimeConfig: {
    apiSecret: process.env.API_SECRET
  }
}

方式二：手动调用dotenv按优先级加载（灵活度最高） #

如果需要自定义加载顺序（比如加入本地不提交Git的.env.local个人配置），可以直接在nuxt.config.js顶部引入原生dotenv，按优先级顺序加载文件，无需依赖模块的加载逻辑：

// 注意：这部分代码必须写在nuxt.config.js的最顶部
const dotenv = require('dotenv')
const path = require('path')

// 加载顺序从低到高，后加载的文件会覆盖前面的同名变量
dotenv.config({ path: path.resolve(__dirname, '.env') })
dotenv.config({ path: path.resolve(__dirname, `.env.${process.env.NODE_ENV}`), override: true })
// 可选：加载本地个人配置，该文件可以加入.gitignore
dotenv.config({ path: path.resolve(__dirname, '.env.local'), override: true })

export default {
  // 后续正常编写Nuxt配置即可
}

注意事项 #

• 不要将数据库密码、服务端密钥等敏感信息配置在publicRuntimeConfig（Nuxt2）或runtimeConfig.public（Nuxt3）下，这部分内容会打包到客户端代码中，存在泄漏风险
• 如果需要让.env文件中的变量覆盖系统级环境变量，给dotenv.config传入override: true参数即可
• 所有env文件建议放在项目根目录（与nuxt.config文件同层级），避免出现路径解析错误
• 环境变量命名建议遵循全大写下划线分隔的规范，减少框架解析异常的概率

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