我正在开发一个带有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调用:(我正在努力寻找问题,请不要粗鲁地回应。谢谢
发布于 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在构建时对其进行翻译。
发布于 2018-05-21 00:19:14
如果我正确理解了您的问题,您正在使用nginx提供一个webpack包,并试图访问该包中的环境变量。
不幸的是,它并不完全是这样工作的。您的JS文件没有访问环境的权限,因为它是一个已经交付给客户端的资源。我已经提出了一个解决方案,它还可以在容器启动时创建的单独JS文件中,将这些环境变量与包一起提供。
https://stackoverflow.com/questions/50408566
复制相似问题