Nuxt3静态站点客户端访问环境变量失败问题求助

问题原因 #

Nuxt3的安全设计中，以NUXT_开头的环境变量默认属于服务端专属配置，仅能在服务端代码（如API路由、服务端中间件、服务端组合式函数）中访问，客户端调用useRuntimeConfig()无法获取到这类敏感变量，目的是防止敏感信息（如GitHub令牌）泄露到前端。

正确解决方式 #

由于GitHub令牌属于敏感信息，绝对不能直接暴露给客户端，正确的做法是在服务端封装逻辑，客户端通过调用服务端API间接使用该令牌：

1. 确认.env文件配置
   你的.env文件配置是正确的，Nuxt会自动加载该文件的变量：

   NUXT_GITHUB_TOKEN=mytoken
   

2. 创建服务端API路由
   在项目根目录下创建server/api/github.ts文件，编写服务端逻辑调用GitHub API：

   export default defineEventHandler(async (event) => {
     const runtimeConfig = useRuntimeConfig();
     // 这里使用服务端的令牌调用GitHub接口
     const githubResponse = await fetch('https://api.github.com/your-target-endpoint', {
       headers: {
         Authorization: `token ${runtimeConfig.NUXT_GITHUB_TOKEN}`
       }
     });
     return await githubResponse.json();
   });
   

3. 客户端调用服务端API
   在SimpleComponent.vue中通过useFetch或$fetch调用上述API：

   <script setup>
   async created() {
     const { data } = await useFetch('/api/github');
     console.log(data);
   }
   </script>
   

重要警告 #

绝对不要将敏感令牌配置到nuxt.config.ts的runtimeConfig.public中，也不要使用NUXT_PUBLIC_前缀命名该变量，这会直接将敏感信息暴露给客户端，导致令牌泄露风险。

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