如何在Nuxt中为多环境生成对应构建包并配置环境变量

1. 生成 staging 环境构建包 #

默认npm run generate确实会固定将NODE_ENV设为production，这是Nuxt为了保证构建产物优化效果的默认逻辑，我们可以通过自定义环境标识+新增构建脚本的方式区分环境：

• 如果是Windows系统开发，先全局或项目内安装cross-env抹平跨平台环境变量设置差异：
  npm i cross-env -D
• 修改项目根目录package.json的scripts字段，新增对应环境的构建命令：
  Nuxt2 配置示例

  {
    "scripts": {
      "dev": "nuxt", // 本地开发默认归为staging范畴
      "generate:staging": "cross-env NUXT_APP_ENV=staging nuxt generate",
      "generate:prod": "cross-env NUXT_APP_ENV=production nuxt generate"
    }
  }
  

  Nuxt3 配置示例
  Nuxt3原生支持mode参数，无需额外安装cross-env：

  {
    "scripts": {
      "dev": "nuxt dev",
      "generate:staging": "nuxt generate --mode staging",
      "generate:prod": "nuxt generate --mode production"
    }
  }
  

• 后续执行npm run generate:staging即可生成staging环境的构建包，npm run generate:prod生成生产环境包。

2. 多环境.env 文件配置 #

按照以下步骤配置多套专属环境变量即可：

• 在项目根目录创建对应环境的配置文件，公共变量可以放在根目录.env文件中，各环境专属变量放在对应环境文件中，优先级：环境专属env > 公共.env
  你需要创建的文件清单：
  • .env：公共默认配置，所有环境共用的变量存在这里
  • .env.staging：staging环境（含本地开发）专属配置，比如测试接口地址、测试埋点标识等
  • .env.production：生产环境专属配置，比如线上接口地址、正式埋点标识等
• 配置Nuxt读取对应环境的env文件
  Nuxt2 配置
  先安装@nuxtjs/dotenv依赖：npm i @nuxtjs/dotenv -D
  然后修改nuxt.config.js头部：

  require('dotenv').config({
    path: `.env.${process.env.NUXT_APP_ENV || 'staging'}`
  })
  export default {
    modules: ['@nuxtjs/dotenv'],
    // 要暴露给客户端使用的变量需要在这里声明，否则仅服务端可访问
    env: {
      API_BASE_URL: process.env.API_BASE_URL,
      APP_ENV: process.env.NUXT_APP_ENV
    }
  }
  

  Nuxt3 配置
  Nuxt3内置dotenv能力，无需额外配置，会自动根据运行时的mode参数读取对应.env.[mode]文件的配置。注意如果要暴露给客户端使用的变量，需要加上NUXT_PUBLIC_前缀，比如NUXT_PUBLIC_API_BASE_URL，客户端可以直接通过useRuntimeConfig().public.API_BASE_URL访问。

注意：不要将密钥、接口签名秘钥等敏感配置放到可暴露给客户端的变量中，避免泄露风险。

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