我正在开发一个带有vuejs前端和nodejs后端的应用程序。我的前端向后端发出API https请求。我已经用vue-cli和webpack启动了我的项目。我需要从env变量(backend_url)获取后端API url。由于我使用的是webpack，我在config/prod.env.js:中添加了这一行
module.exports = {
NODE_ENV: '"production"',
-> BACKEND_URL: JSON.stringify(process.env.BACKEND_URL)
}
它使用webpack开发服务器在开发模式下完美工作。我通过docker组合文件传递env-var：
environment:
- BACKEND_URL=https://whatever:3000
但当我运行build时，我使用nginx来提供静态文件(但使用visualstudio代码实时服务器扩展时问题是一样的)。我以与以前相同的方式发送BACKEND_URL env var。现在的问题是进程.env.BACKEND_URL在应用程序中未定义(但在容器中定义)！！所以我无法进行后端http调用：(我很难找到问题所在，请不要对回答无礼。谢谢
它们在构建时不会被"翻译"，这就是您的情况。在节点环境中，当您请求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在构建时对其进行翻译。
尝试一下：https://www.brandonbarnett.io/blog/2018/05/accessing-environment-variables-from-a-webpack-bundle-in-a-docker-container/
如果我正确理解您的问题，那么您正在使用nginx提供一个webpack捆绑包，并试图从该捆绑包访问环境变量。
不幸的是，它不完全是这样工作的。您的JS文件无法访问环境，因为它是已交付给客户端的资源。我提出了一个解决方案，该解决方案还将这些env变量与捆绑包一起交付到一个单独的JS文件中，该文件在容器启动时创建。
来自VueJS文档：https://cli.vuejs.org/guide/mode-and-env.html
在客户端代码中使用环境变量
只有以VUE_APP_开头的变量才会通过webpack静态嵌入到客户端捆绑包中。DefinePlugin。您可以在应用程序代码中访问它们：
console.log(process.env.VUE_APP_SECRET)
在生成过程中，process.env.VUE_APP_SECRET将被相应的值替换。在VUE_APP_SECRET＝SECRET的情况下；秘密"；。
因此，在您的情况下，以下内容应该起作用。在我的项目中，我曾经遇到过同样的问题，我从vue/cli和vue create project ...开始
VUE_APP_BACKEND_URL=https://whatever:3000