javascript - WebPack:访问客户端代码中的 Node 环境变量

Question

我正在开发一个使用 Webpack 来打包客户端 JavaScript 和 CSS 的项目。它启动了一个服务器，这样我就可以进行热重载和其他巧妙的技巧。因此，当我调试应用程序时，webpack 服务器正在 localhost:3000 上运行。我还使用 nodemon 启动另一个 Web 服务器来托管我的 API 调用。它显然不能在同一个端口上运行，所以我必须在端口 3002 上启动它。

我已经设置了一个 Node 环境变量，它告诉我的 api 它应该托管在哪个端口上。我需要以某种方式访问​​客户端脚本中的相同环境变量，以便我的 ajax 调用知道它们需要调用哪个端口。

在我开始使用 webpack 之前，我从同一端口托管我的 api 和客户端代码，我可以像这样的“ Controller /操作”进行 api 调用。现在我已经将它们托管在两个不同的域中，我需要告诉我的 api 调用包含端口的完全限定 URL。即:“主机:端口/ Controller /操作”。据我了解，我还需要在 API 服务器上配置 CORS。

当我将其推送到生产环境时，我将再次托管来自同一域的客户端文件和 API 调用，因此我将能够继续进行相关 api 调用“ Controller /操作”。因此，我需要从客户端代码获取对环境变量的访问权限，以便确定如何在开发环境和生产环境中形成 api 调用。

Answer 1

也许是webpack devServer proxy值得追求。

devServer: {
...
  proxy: {
    '*/controller/*': {
      target: 'http://localhost:3002'
  }
}

客户会幸福地不知道开发/生产之间的差异。