Nuxt 配置：如何在 nuxt.config.js 的“auth”部分中使用 process.env 或类似内容答案

【问题标题】：Nuxt configuration: How to user process.env or similiar in the "auth" section of nuxt.config.jsNuxt 配置：如何在 nuxt.config.js 的“auth”部分中使用 process.env 或类似内容
【发布时间】：2022-02-01 05:44:04
【问题描述】：

我是 Nuxt 的新手（使用 Nuxt 2.15.3 + Vue2 + Javascript）。

我在使用 AUTH_PROVIDER_URL 环境变量时遇到了一些困难，该环境变量在我的本地设置、暂存服务器和生产环境中设置为不同。我 100% 确定在每个环境中都正确设置了环境变量。

我遇到的问题是在 nuxt.config.js 文件和“auth”部分下，我需要为每个环境（本地、暂存、生产）指向不同的 URL。

https://auth.nuxtjs.org/schemes/oauth2#options

在我的 nuxt.config.js 我有：

authorization: process.env.AUTH_PROVIDER_URL + '/auth',
userInfo: process.env.AUTH_PROVIDER_URL + '/userinfo',
logout: process.env.AUTH_PROVIDER_URL + '/logout',

当我在开发（npm run dev）和生产模式（npm run build，npm run start）中启动应用程序时，这在我的计算机上本地运行良好。 url 的变量（授权、userInfo 和注销）根据 process.env.AUTH_PROVIDER_URL 语句正确设置。

但是当我将它部署并运行到登台和生产服务器时，process.env.AUTH_PROVIDER_URL 返回 UNDEFINED。似乎“process.env”在登台和生产服务器上的 nuxt.config.js 文件的“auth”上下文中找不到 AUTH_PROVIDER_URL 环境变量。

在 nuxt.config.js 文件中使用如下所示的 process.env 可以在本地、暂存服务器和生产服务器上工作，并且变量设置正确。

export default {
  auth_provider_url: process.env.AUTH_PROVIDER_URL,

  publicRuntimeConfig: {
    auth_provider_url: process.env.AUTH_PROVIDER_URL,
  },

}

为什么 process.env 在 nuxt.config.js 文件的上下文中可以正常工作，但在 nuxt.config.js 的“auth”上下文中却不行？我可以在 nuxt.config.js 文件的“auth”部分下访问这些变量吗？

在 nuxt.config.js 文件的“auth”部分下处理（使用）环境变量的首选/正确方法是什么？

【问题讨论】：

文档中是否提到了AUTH_PROVIDER_URL？如果没有，你能试试这个NUXT_ENV_AUTH_PROVIDER_URL
AUTH_PROVIDER_URL 是我想出的环境变量名称...文档中是否提到了 NUXT_ENV_AUTH_PROVIDER_URL ？好像没找到。
当以NUXT_ENV开头时，它有一个特殊的功能。可能适用于您的情况。或者它可能不会。也许值得一试？ nuxtjs.org/docs/configuration-glossary/configuration-env/…

标签： javascript node.js vue.js nuxt.js

【解决方案1】：

process.env 是您在系统上定义的environment variable。在您的本地情况下，您可能有一个包含这些密钥的 .env 文件，当您运行 npm run dev 时，它会自动为您加载它们。
现在，当您构建应用程序时，一些环境变量会在构建阶段被替换，因此您需要在执行此操作时让它们可用，但有些则不需要，因此您还需要在运行时在服务器上设置它们。

【讨论】：