使用.env.development替代.env时process.env返回undefined如何解决

根因说明 #

你使用的dotenv-webpack插件默认仅读取项目根目录下的.env文件，将配置文件重命名为.env.development后，插件无法匹配到对应的配置文件，无法完成环境变量注入，最终导致process.env为undefined。

修复方法 #

方案1：固定指定加载.env.development文件 #

直接修改webpack.config.js中Dotenv插件的初始化配置，手动指定加载路径：

// 把原有的 new Dotenv() 替换为下方代码
new Dotenv({
  path: './.env.development'
})

该方案适合仅需要使用development环境配置的场景，修改后重启项目即可生效。

方案2：根据环境变量动态加载对应配置文件（更灵活，推荐） #

1. 先修改package.json中的启动脚本，注入NODE_ENV变量：
   • Mac/Linux环境直接修改scripts：

   "scripts": {
     "start": "NODE_ENV=development webpack-dev-server --config ./webpack.config.js"
   }
   

   • Windows环境需要先安装cross-env适配跨平台环境变量注入，执行npm i cross-env -D后修改scripts：

   "scripts": {
     "start": "cross-env NODE_ENV=development webpack-dev-server --config ./webpack.config.js"
   }
   

2. 再修改webpack.config.js中Dotenv插件配置，根据NODE_ENV动态匹配配置文件：

   new Dotenv({
     path: `./.env.${process.env.NODE_ENV}`
   })
   

该方案后续新增生产环境.env.production等配置时，只需要新增对应启动脚本即可，不需要重复修改插件配置。

验证 #

修改完成后重启项目，即可正常读取process.env下的配置变量。

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