Webpack编译未嵌入后端URL，前端如何知晓请求地址？

可能的原因及对应解释： #

• 代码未实际引用该变量：如果你的前端代码里没有写process.env.REACT_APP_BASE_URL来调用这个环境变量，Webpack的tree-shaking机制会把未被使用的环境变量剔除，打包产物里自然找不到它的痕迹——这种情况下前端根本“不知道”这个地址，你需要在API请求的代码里明确使用这个变量。

• 变量被Tree-shaking移除：Webpack生产模式默认启用tree-shaking，只要变量没有被任何业务代码引用，就会被标记为无用代码并在打包时删除。哪怕你在.env文件里定义了它，没用到就不会出现在最终产物里。

• 变量名被压缩混淆：生产环境打包时，Webpack会通过Terser等工具压缩混淆代码，process.env.REACT_APP_BASE_URL这类变量名会被替换成极短的标识符（比如a、b），所以直接搜索REACT_APP_BASE_URL找不到，但实际的URL值可能以字符串形式隐藏在打包后的代码里。你可以尝试搜索环境变量对应的实际URL值，看看是否存在。

• Dotenv插件配置疏漏：虽然你说配置了Dotenv插件，但可能存在配置错误：比如未正确指定.env.prod的路径，或者没有配合DefinePlugin将process.env变量注入到全局。正确的配置通常需要在Webpack配置里同时使用dotenv-webpack插件，或者手动用DefinePlugin将process.env.REACT_APP_BASE_URL替换为实际值。举个配置例子：

  const Dotenv = require('dotenv-webpack');
  module.exports = {
    plugins: [
      new Dotenv({
        path: './.env.prod', // 确保路径正确
        systemvars: true
      })
    ]
  };
  

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