如何在 NUXT 3 中向客户端公开 .env 变量？

Question

我有一个 nuxt 配置文件，它试图向客户端公开我所有的 .env 变量。 一些变量暴露了，我可以访问它们（我正在使用 useRuntimeConfi() 进行访问），而有些变量在我尝试访问它们时只返回“未定义”

我不知道原因可能是什么，但这是我要查看的代码：

nuct.config.ts:

export default defineNuxtConfig({
    /*
     ** Runtime Variables
     */
    runtimeConfig: {
      apiVersion: process.env.API_VERSION || 'alpha',
      cmsUrl: process.env.CMS_URL || 'http://localhost:1337',
      cmsToken: process.env.CMS_TOKEN || 'token',
      public: {
        baseURL: process.env.BASE_URL || 'http://localhost:3000',
        auth0Domain: process.env.AUTH0_DOMAIN,
        auth0ClientID: process.env.AUTH0_CLIENT_ID,
        redirectUri: process.env.REDIRECT_URI || 'http://localhost:3000/',
        stagingUri: process.env.STAGING_URI,
        localDevUri: process.env.LOCAL_DEV_URI,
        cmsUrl: process.env.CMS_URL || 'http://localhost:1337',
      }
    },
});

我的 auth.js 文件：

import { createAuth0 } from '@auth0/auth0-vue';
import { useRuntimeConfig } from 'nuxt/app';

//the below console.log returns undefined
console.log(useRuntimeConfig().stagingUri, useRuntimeConfig().redirectUri;

export default defineNuxtPlugin((nuxtApp) => {
  const auth0 = createAuth0({
    domain: useRuntimeConfig().auth0Domain,
    clientId: useRuntimeConfig().auth0ClientID,
    authorizationParams: {
        redirect_uri: useRuntimeConfig().redirectUri || useRuntimeConfig().stagingUri,
    },
    logoutParams: {
      returnTo: useRuntimeConfig().redirectUri || useRuntimeConfig().localDevUri,
    },
    useRefreshTokens: true,
    cacheLocation: 'localstorage'
  });

  if (process.client) {
    nuxtApp.vueApp.use(auth0);
  }

  addRouteMiddleware('auth', () => {
    if (process.client) {
      auth0.checkSession();
      if (!auth0.isAuthenticated.value) {
        auth0.loginWithRedirect({
          appState: {
            target: useRoute().path,
          },
        });
      }
    }
  });
});

从文件中可以看出，redirectUri 属性已定义，但 stagingUri 和 localDevUri 未定义。这是为什么？？

Answer 1

在您的

public

中包含

useRuntimeConfig()

键

const auth0 = createAuth0({
    domain: useRuntimeConfig().public.auth0Domain, // Add the .public
    clientId: useRuntimeConfig().public.auth0ClientID, // Add .public
    authorizationParams: {
        redirect_uri: useRuntimeConfig().public.redirectUri || useRuntimeConfig().public.stagingUri, // Add .public
    },
    logoutParams: {
      returnTo: useRuntimeConfig().public.redirectUri || useRuntimeConfig().public.localDevUri, // Add .public
    },
    useRefreshTokens: true,
    cacheLocation: 'localstorage'
  });

访问

useRuntimeConfig().public

将显示所有可用的公共配置变量。

Answer 2

当我在

.env & runtimeConfig()

中有新数据时遇到类似的问题。我的新数据未定义。 我的 nuxt 版本是 3.2.3。我升级到最后一个 nuxt 版本，它现在可以工作了。

.env 内部：

NUXT_PUBLIC_stagingUri=something

runtimeConfig: {
    public: {
      stagingUri: process.env.stagingUri
    },
  },

并使用

useRuntimeConfig().public.stagingUri

确实访问