时间戳

首页 > 解决方案 > 在运行本地开发服务器时，在 UI 中设置的 Netlify 环境变量被注入为未定义

environment-variables - 在运行本地开发服务器时，在 UI 中设置的 Netlify 环境变量被注入为未定义

问题描述

我在 Netlify UI 中设置了一些环境变量。

看这里：

在此处输入图像描述

我试图在我的代码中使用它们，如下所示：

    console.log("AUTH0_DOMAIN:");
    console.log(process.env.AUTH0_DOMAIN);
    console.log("AUTH0_CLIENT_ID:");
    console.log(process.env.AUTH0_CLIENT_ID);
    console.log("AUTH0_AUDIENCE:");
    console.log(process.env.AUTH0_AUDIENCE);

当使用它启动 CLI 本地开发服务器ntl dev时，看起来环境变量被注入：

在此处输入图像描述

但它们都通过了，undefined如下面的控制台所示：

在此处输入图像描述

那么我做错了什么？

为什么它们会以未定义的形式出现？

PS我知道我不应该在这里使用密钥，因为它们会被暴露，但我仍然想知道如何为非秘密的东西做这件事。

更新：在实时部署到 Netlify 后，环境变量也未定义。所以它在现场版和开发版上都坏了。

更新2：将其分配给变量，如下所示，也不起作用：

const a_d = process.env.AUTH0_DOMAIN;
console.log(a_d); // This prints undefined

标签： environment-variablesnetlifynetlify-cli

解决方案

我正在构建一个 Vue 应用程序。

事实证明，所有Vue 环境变量都需要VUE_APP_在代码和 Netlify UI 中加上前缀。

例如，它const authDomain = process.env.VUE_APP_AUTH0_DOMAIN;在代码中，您还必须VUE_APP_AUTH0_DOMAIN在 Netlify UI 中使用。

推荐阅读