VueJS和Webpack:ENV var无法从建成的项目中获取

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (77)

我正在使用vuejs前端和nodejs后端的应用程序。我的前端向后端发出API https请求。我用vue-cli和webpack开始了我的项目。我需要从env变量(BACKEND_URL)获取后端API网址。由于我使用webpack,我将此行添加到config / prod.env.js:

module.exports = {
  NODE_ENV: '"production"',
 -> BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}

它使用webpack-dev-server在dev模式下完美运行。我将env var传递给docker-compose文件:

environment:
            - BACKEND_URL=https://whatever:3000

但是当我运行构建时,我使用nginx来提供静态文件(但问题是使用visual studio代码实时服务器扩展)。我以与以前相同的方式发送BACKEND_URL env var。现在的事情是process.env.BACKEND_URL在应用程序中未定义(但在容器中定义)!! 所以我不能进行后端http调用:(我正在努力寻找问题,请不要对回复不礼貌。谢谢

提问于
用户回答回答于

给这个镜头:https//www.brandonbarnett.io/blog/2018/05/accessing-environment-variables-from-a-webpack-bundle-in-a-docker-container/

如果我正确理解您的问题,您将使用nginx提供webpack包,并尝试从该包中访问环境变量。

不幸的是,它并没有那么好用。您的JS文件无法访问环境,因为它是已传递到客户端的资源。我已经提出了一个解决方案,它还将这些env变量与bundle一起提供在一个单独的JS文件中,该文件在容器启动时创建。

用户回答回答于

它们在构建期间不会被“翻译”,这就是你正在发生的事情。在节点环境中,当您要求process.env它时将显示系统中可用的所有环境变量,这是真的。但是Web应用程序process.env在执行时无权访问。您需要一种在构建期间翻译它们的方法。

要实现这一点,你必须使用DefinePlugin。它在构建时间内翻译任何内容,并在其他内容中写入一个神奇的字符串。

使用你自己的例子:

module.exports = {
  NODE_ENV: '"production"',
  BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}

如果你在构建期间这样做,没有DefinePlugin,webpack将不知道如何处理它,它将是一个简单的字符串。

如果您使用DefinePlugin:

new webpack.DefinePlugin({
  "process.env.BACKEND_URL": JSON.stringify(process.env.BACKEND_URL)
});

通过这样做,您允许webpack在构建期间转换它。

扫码关注云+社区

领取腾讯云代金券