docker - VueJS 和网页包 : ENV var unaccessible from built project

Question

我正在使用 vuejs 前端和 nodejs 后端开发一个应用程序。我的前端向后端发出 API https 请求。我用 vue-cli 和 webpack 开始了我的项目。 我需要从环境变量 (BACKEND_URL) 获取后端 API url。 因为我使用的是 webpack，所以我将这一行添加到 config/prod.env.js :

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

它使用 webpack-dev-server 在开发模式下完美运行。我通过 docker-compose 文件传递​​环境变量:

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

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

Answer 1

它们在构建时没有被“翻译”，这就是你正在发生的事情。在节点环境中，当您请求 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 在构建期间翻译它。