Webpack 为内置Netlify设置环境变量

我正在尝试为一个API键设置一个环境变量，我不想在代码中使用它。我的源javascript如下所示：

.get(`http://api-url-and-parameters&api-key=${process.env.API_KEY}`)

我正在使用webpack和包dotenv webpack在gitignored.env文件中设置API_密钥，并且在我的本地计算机上运行良好。我还希望在通过Netlify部署时能够设置该变量，我已经尝试通过GUI将其添加到“build environment variables”中，并直接在build命令中设置该变量，但没有成功

---

知道可能是什么问题吗？

警告：如果这是一个密钥。它应该仅由生成脚本使用，以便在生成期间用于创建内容

问题

dotenv-webpack

希望在包的webpack构建过程中有一个

.env

文件加载到变量中。Netlify签出存储库时，

.env

不存在，因为有充分的理由它位于

.gitignore

中

解决方案 在运行build命令之前，将API_密钥存储在Netlify

build环境变量中，并使用脚本生成
.env

scripts/create env.js

const fs = require('fs')
fs.writeFileSync('./.env', `API_KEY=${process.env.API_KEY}\n`)

将脚本作为构建的一部分运行

node./scripts/create-env.js&

注意事项和建议

不要将此方法用于面向公众的存储库[open]，因为任何PR或分支部署都可能在代码中创建一个简单的脚本以公开API\u密钥
上面的示例脚本是为了简单起见，因此，使您使用的任何脚本都能够用
0
以外的代码出错，因此如果脚本失败，部署将失败
您可以通过执行以下操作，将Dotenv webpack设置为加载系统环境变量以及在.env文件中声明的变量：

  plugins: [
    new Dotenv({
        systemvars: true
    })
  ]

例如，将webpack dotenv插件的systemvars属性设置为true

请注意，同名的系统环境变量将覆盖在.env文件中定义的变量

来源：
如果您使用的是Nuxt JS，则有一种更“直接”的方法

只需像这样编辑
numxt.config.js
：

module.exports = {
  env: {
    GOOGLE_API_KEY: process.env.GOOGLE_API_KEY

  },
  // ...

然后像往常一样，通过
构建环境变量
将GOOGLE_API_键添加到Netlify

归功于，他的回答继续。
如果你在Netlify中转到相应站点的设置，在
build&deploy
下，你可以找到一个名为
environment variables
的部分，你可以很容易地从那里添加环境变量。如果将
MY\u API\u KEY
变量添加到环境变量中，则可以通过
process.env.MY\u API\u KEY
在项目内部访问该变量

您还可以定义一个。UI中定义的Netlify环境变量将与之配合使用。您不需要dotenv或dotenv网页包

webpack.config.js

const webpack = require("webpack");

module.exports = {
  plugins: [
    new webpack.DefinePlugin({
      "process.env.API_KEY": JSON.stringify(process.env.API_KEY)
    }),
  ]
}

但是，如果API密钥是机密的，并且项目是公共的，那么当然不应该只在前端输入环境变量。API密钥将出现在网站的源代码中，访问它的每个人都可以轻松访问
 您也可以使用Netlify的配置文件。。。
您可以找到文档。
此外，我还希望每个分支/环境都有值不同的相同的环境变量。
这个变通方法对我很有效：

创建一个netlify.toml文件，如：

[build]
  NUXT_ENV_BASE_API = "/api"
  NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr"

[context.branch-deploy]
  environment = { NUXT_ENV_BASE_API = "/dev-api", NUXT_ENV_HOST_DOMAIN = "https://dev.your-domain.gr" }

[context.production]
  environment = { NUXT_ENV_BASE_API = "/api", NUXT_ENV_HOST_DOMAIN = "https://your-domain.gr" }

并在Netlify中部署…
只是为了澄清一点-您正在使用webpack在构建时运行JS，不打算在浏览时执行某些操作，对吗？是的，我应该澄清一下，但正如标题所示，这只在构建时调用，在运行时不会在任何地方公开。这是一个很好的答案，Netlify支持团队完全认可！“Build Environment Variables”部分位于您的构建和部署设置页面上-第二张“卡片”谢谢，这非常有用。我已经走了一半，但没有意识到你可以使用Netlify动态创建文件。我在谷歌搜索了很多次后发现了这个解决方案，它对我很有用，但很奇怪，Netlify@fool上没有关于这个的官方文档，在官方文档中看不到这一点的原因是，这不适合环境变量的通用解决方案规则，因为Netlify支持许多构建解决方案。如果您的项目需要
.env
设置，我的解决方案确实可以解决问题，但如果您想将其用作替代方案，我的解决方案确实会有所帮助。环境变量通常在构建时可以访问。@JBalin OP没有使用他所说的前端代码中的键。OP甚至在被询问时在注释中说明。只有在他的构建过程中。我同意你的观点，他不应该在客户端代码中使用thees键。我想知道为什么这不是一个公认的答案。我发现这对于CI来说是非常干净的。这100%应该是公认的答案，工作起来很有魅力！如果我想拥有相同的key env变量，但每个环境（dev、stage、prod环境）的值不同？？