WebPack:访问客户端代码中的节点环境变量

WebPack: Accessing Node Environment Variables in client code

本文关键字：节点 环境变量 代码 访问 客户端 WebPack      更新时间：2023-09-26

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

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

在我开始使用 webpack 之前，我从同一个端口托管我的 api 和我的客户端代码，我可以像这样的"控制器/操作"进行 api 调用。 现在我将它们托管在本质上两个不同的域中，我需要告诉我的 api 调用一个完全限定的 url，包括端口。 即："主机：端口/控制器/操作"。 我知道我还需要在 API 服务器上配置 CORS。

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

也许 webpack devServer 代理值得追求。

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

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

相关文章：