Netlify部署Nuxt项目遇环境变量问题：登录正常搜索API失败

问题概述 #

部署Nuxt站点到Netlify后，登录功能可正常调用API（依赖某环境变量），但搜索操作的API调用失败，提示undefined environment variable，且失败请求的URL开头嵌入了无关域名，两者使用的是同一环境变量。

相关截图：

排查与解决步骤 #

1. 区分Nuxt环境变量的客户端/服务端可用性 #

Nuxt对环境变量的读取有严格区分：

• 服务端侧（如asyncData、fetch的服务端渲染阶段、serverMiddleware）可直接读取未加前缀的环境变量。
• 客户端侧（如页面组件内的请求、Vue方法中发起的请求）必须使用NUXT_PUBLIC_前缀的环境变量，否则会返回undefined。

解决：

• 将搜索API用到的环境变量添加NUXT_PUBLIC_前缀（例如原变量API_URL改为NUXT_PUBLIC_API_URL）。
• 同步更新Netlify的环境变量配置，以及代码中所有对应的变量引用。

2. 清除Netlify部署缓存 #

Netlify的部署缓存可能导致旧代码未更新，客户端仍无法读取新配置的环境变量：

• 进入Netlify站点后台，选择"Deploys" > 点击最新部署右侧的"Clear cache and deploy site"，强制重新构建部署。

3. 检查搜索API的URL拼接逻辑 #

失败请求出现无关域名，大概率是URL拼接代码存在错误：

• 核对搜索请求的代码，确保是通过环境变量拼接URL，例如：

  // 正确写法
  const searchUrl = `${process.env.NUXT_PUBLIC_API_URL}/search`
  // 避免硬编码或错误拼接其他域名
  

4. 验证Netlify环境变量配置 #

确认Netlify环境变量的配置无误：

• 检查变量是否在"Site settings > Environment variables"中正确添加，未设置错误的分支作用域。
• 确保部署过程中环境变量已被注入：可在Netlify部署日志中搜索变量名，确认是否存在Injecting environment variables相关记录。

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