Nuxt3本地无法访问私有runtimeConfig变量的解决方案咨询

你的问题核心是本地环境未正确加载环境变量，且需注意私有变量的访问范围，以下是无需修改现有runtimeConfig代码的解决步骤：

1. 配置本地环境变量文件 #

在项目根目录创建.env文件，填入你的第三方服务令牌和公共地址：

API_TOKEN_MAILERLITE=你的实际MailerLite令牌值
API_BASE_MAILERLITE_URL=你的MailerLite API基础地址

注意：务必将.env添加到.gitignore中，避免敏感信息提交到代码仓库。

2. 正确在服务端上下文访问私有变量 #

Nuxt3的runtimeConfig私有变量仅能在服务端代码中访问（客户端无法直接获取，这是安全设计），你需要在以下场景中调用：

场景一：Server API路由中 #

在server/api下的接口文件里，通过useRuntimeConfig结合事件上下文获取：

export default defineEventHandler(async (event) => {
  const { API_TOKEN_MAILERLITE } = useRuntimeConfig(event);
  // 调用MailerLite API的逻辑
  const response = await fetch(`${useRuntimeConfig().public.API_BASE_MAILERLITE_URL}/xxx`, {
    headers: {
      Authorization: `Bearer ${API_TOKEN_MAILERLITE}`
    }
  });
  return await response.json();
});

场景二：页面/组件的服务端数据获取中 #

在asyncData或useFetch的服务端执行逻辑里获取：

<script setup>
const { data } = await useFetch('/api/mailerlite-data', {
  server: true, // 确保在服务端执行
  async onRequest({ options }) {
    const config = useRuntimeConfig();
    options.headers = {
      ...options.headers,
      Authorization: `Bearer ${config.API_TOKEN_MAILERLITE}`
    };
  }
});
</script>

3. 验证本地运行 #

重启Nuxt开发服务器（npm run dev），此时服务端代码就能正确获取到API_TOKEN_MAILERLITE的值，无需修改原有的runtimeConfig配置。

内容的提问来源于stack exchange，提问作者jlgf