VueJS和Webpack:已建项目中无法访问的环境变量
我正在开发一个带有vuejs前端和nodejs后端的应用程序。我的前端向后端发出了接口https请求。我从vue-cli和webpack开始了我的项目。我需要从环境变量(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模式下可以完美地工作。我通过docker-compose文件传递env var：
environment:
- BACKEND_URL=https://whatever:3000但是当我运行build时，我使用nginx来提供静态文件(但问题与使用visual studio code live server扩展时的问题相同)。我发送BACKEND_URL env var的方式和以前一样。现在的问题是process.env.BACKEND_URL在应用程序中没有定义(但在容器中定义)！所以我不能做后端http调用:(我正在努力寻找问题，请不要粗鲁地回应。谢谢
回答 2
Stack Overflow用户
发布于 2018-05-18 20:37:02
它们在构建时不会被“翻译”，这就是发生在你身上的事情。在节点环境中，当您请求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在构建时对其进行翻译。
Stack Overflow用户
发布于 2018-05-21 00:19:14
如果我正确理解了您的问题，您正在使用nginx提供一个webpack包，并试图访问该包中的环境变量。
不幸的是，它并不完全是这样工作的。您的JS文件没有访问环境的权限，因为它是一个已经交付给客户端的资源。我已经提出了一个解决方案，它还可以在容器启动时创建的单独JS文件中，将这些环境变量与包一起提供。
https://stackoverflow.com/questions/50408566
复制相似问题