Nuxt部署Vercel后process.env.Token为null问题求解

我之前也碰到过一模一样的问题，折腾了好一阵子才找到根源，给你几个实用的排查和解决方向：

1. 先核对环境变量的命名与大小写 #

环境变量是大小写敏感的！别小看这个细节——你本地.env里写的是Token，就得确保Vercel后台添加的环境变量名称完全一致，不能是token、TOKEN或者多打了空格。

2. 根据Nuxt版本配置正确的变量暴露方式 #

不同版本的Nuxt对环境变量的处理逻辑不一样，别混用配置：

Nuxt 2 配置方式 #

需要在nuxt.config.js里显式把环境变量暴露出来，否则部署后无法访问：

export default {
  env: {
    Token: process.env.Token
  }
}

如果这个Token只在服务端使用，也可以用serverEnv替代env，更安全。

Nuxt 3 配置方式 #

Nuxt 3推荐用runtimeConfig，区分服务端私有变量和客户端公开变量（敏感密钥绝对不能放public里！）：

export default defineNuxtConfig({
  runtimeConfig: {
    // 仅服务端可访问的私有变量
    Token: process.env.Token,
    public: {
      // 客户端需要用到的变量才放这里（比如非敏感的配置）
    }
  }
})

然后在代码里通过useRuntimeConfig()获取变量，而不是直接用process.env：

const config = useRuntimeConfig()
console.log(config.Token) // 服务端环境下能正常拿到值

3. 确认Vercel环境变量的配置范围与部署触发 #

• 检查你添加的环境变量是否属于当前部署的环境（Production/Preview/Development），别不小心加到了其他环境里；
• 添加完环境变量后，必须重新触发部署！Vercel不会自动用新的环境变量更新旧的构建，要么手动在Deployments页面点「重新部署」，要么推个空commit触发新构建。

4. 检查Vercel环境变量的注入时机 #

如果你的Token是在构建阶段需要用到的（比如静态生成页面时调用API），要确保Vercel把变量设置为「Build Time」或「Both」（默认是Both），别选「Runtime Only」——否则构建阶段拿不到变量，自然会是null。

5. 查看Vercel构建日志找线索 #

去Vercel的Deployment详情页翻构建日志，搜索Token或者process.env相关关键词，看看有没有变量加载失败的提示。比如日志里如果显示Token: undefined，说明变量根本没被注入；如果是null，大概率是名称不匹配或者配置范围错了。

6. 敏感密钥的安全提醒 #

如果这个Token是敏感的API密钥，绝对不能在客户端代码里直接使用process.env.Token！哪怕配置对了，也会把密钥暴露给用户。正确的做法是：用Nuxt的API路由做中间层，客户端调用自己的API路由，由服务端拿着Token去调用第三方接口，这样密钥全程不会泄露到前端。

内容的提问来源于stack exchange，提问作者Mayank Kumar Chaudhari