webpack通过dotenv读取.env的ESRI_KEY调用地理编码服务不生效如何解决

1 .env文件隐形字符问题 #

这是最高概率的触发原因：

• 检查.env文件中ESRI_KEY=api_key_value行的末尾是否存在多余的空格、换行符、或者不必要的单/双引号。dotenv默认会将行尾所有未被转义的内容都作为变量值读取，如果你是复制粘贴的密钥，很可能附带了隐形的换行、空格，或者误加了包裹用的引号，导致传入SDK的密钥和实际有效密钥不一致。
• 验证方法：在打印变量时增加首尾标记确认内容是否纯净，比如：

  console.log('---' + process.env.ESRI_KEY + '---')
  

  对比输出的内容和你直接写的明文密钥是否完全一致、长度是否相同。

2 dotenv-webpack配置适配 #

如果你是分环境打包（比如开发/生产环境对应单独的.env.development、.env.production文件），需要显式指定环境文件路径，否则插件只会默认读取根目录的.env文件：

const path = require('path')
const Dotenv = require('dotenv-webpack');

module.exports = {
  // 其他配置
  plugins: [
    new Dotenv({
      path: path.resolve(__dirname, `.env.${process.env.NODE_ENV}`), // 按需匹配对应环境的配置文件
      systemvars: true // 若需要同时读取系统层面的环境变量可开启
    }),
  ],
};

3 变量清洗后再传入SDK #

部分第三方SDK对参数格式校验严格，你可以强制将读取的环境变量转为去除首尾空白的纯字符串再使用：

console.log(process.env.ESRI_KEY);
// 清洗变量：强制转字符串+去除首尾空白
const ESRI_KEY = String(process.env.ESRI_KEY).trim();

const geocodeService = L.esri.Geocoding.geocodeService({
  apikey: ESRI_KEY
});

额外说明：不存在API密钥不接受环境变量传入的特性，所有密钥本质都是字符串，只要最终传入SDK的字符串和明文密钥完全一致就可以正常生效。你之前遇到的PostgreSQL类似问题也是同样的触发原因：环境变量读取的内容带了隐形字符，和实际有效密码不一致。

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