在客户端代码中使用环境变量

Question

我正在使用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调用:( 我很难找到问题，请不要对回答粗鲁。谢谢

Answer 1

试一试：https://www.brandonbarnett.io/blog/2018/05/accessing-environment-variables-from-a-webpack-bundle-in-a-docker-container/

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

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

Answer 2

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

Answer 3

从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的情况下，它将被替换为“ secret”。

因此，在您的情况下，以下方法可以解决问题。我在项目中曾经遇到过同样的问题，我从vue / cli和vue create project ...

开始

VUE_APP_BACKEND_URL=https://whatever:3000

VueJS＆amp; Webpack：ENV var无法访问已构建的项目

3 个答案:

在客户端代码中使用环境变量