如何通过.env系列文件配置NODE_ENV供webserver等脚本读取

你的需求完全可以实现，具体操作步骤如下：

1 安装必要依赖 #

执行命令安装dotenv相关工具，用于解析.env文件：

npm install dotenv dotenv-expand --save-dev

如果是Windows系统，手动指定环境变量会存在兼容问题，可以额外安装cross-env：

npm install cross-env --save-dev

2 调整env.js文件的加载逻辑 #

修改utils/env.js的内容，实现按优先级加载对应环境的.env文件：

const fs = require('fs');
const path = require('path');
const dotenv = require('dotenv');
const dotenvExpand = require('dotenv-expand');

// 优先读取已指定的NODE_ENV，无值则默认用development
const NODE_ENV = process.env.NODE_ENV || 'development';

// 配置env文件加载优先级，靠前的文件优先级更高
const envPathList = [
  `.env.${NODE_ENV}.local`,
  `.env.${NODE_ENV}`,
  NODE_ENV !== 'test' ? '.env.local' : null,
  '.env'
].filter(Boolean);

// 逐个加载存在的env文件
envPathList.forEach(envPath => {
  const fullPath = path.resolve(__dirname, '..', envPath);
  if (fs.existsSync(fullPath)) {
    const envConfig = dotenv.config({ path: fullPath });
    dotenvExpand.expand(envConfig);
  }
});

module.exports = {
  NODE_ENV,
  ...process.env
};

3 移除硬编码的NODE_ENV赋值 #

• 打开utils/webserver.js，删除开头的process.env.NODE_ENV = 'development'代码，在文件最顶部第一行引入env.js，保证env变量最先加载：

  require('./env');
  

• 打开utils/build.js，删除开头的process.env.NODE_ENV = 'production'代码，同样在文件最顶部第一行引入env.js：

  require('./env');
  

4 验证配置 #

你可以根据使用场景创建对应的env文件：

• 开发环境通用配置写在.env.development
• 生产环境通用配置写在.env.production
• 本地私有配置（比如个人调试用的特殊参数）写在.env.local，需要将该文件添加到.gitignore避免提交到仓库
• 所有环境通用的基础配置写在.env

启动服务或执行构建时，变量会按优先级自动读取：

• 手动指定环境时，比如执行cross-env NODE_ENV=production node utils/build.js，会优先加载.env.production里的配置
• 未指定环境时，默认读取.env.development的配置，没有对应环境文件则回退到.env的配置

注意事项 #

如果需要把.env里的变量注入到扩展的前端运行时代码中，需要在webpack.config.js的DefinePlugin配置里添加对应变量的映射，否则前端代码会读取不到process.env的相关变量。

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