如何让Vite识别Netlify环境变量？部署后变量读取失败

以下是针对该问题的具体排查和解决步骤：

• 检查环境变量命名前缀
  如果你使用React、Vue等前端框架，客户端代码能访问的环境变量必须添加框架指定的前缀：

  • React/Next.js（静态导出）：变量名需以REACT_APP_开头（比如REACT_APP_API_URL）
  • Vue：变量名需以VUE_APP_开头
    确保Netlify后台配置的变量名和代码中引用的名称完全一致，包括前缀。

• 强制清除缓存重新部署
  Netlify默认会缓存构建产物，可能导致新配置的环境变量未被加载：

  1. 进入Netlify项目的「Deploys」页面
  2. 找到最新的部署记录，点击「Trigger deploy」
  3. 选择「Clear cache and deploy site」选项重新构建

• 确认环境变量的作用域
  在Netlify后台配置变量时，要注意变量的作用范围：

  • 确保变量配置在「Production environment variables」下（如果是部署到生产环境）
  • 如果是分支预览部署，要检查是否在对应分支的环境变量中配置了正确的值

• 检查代码中的变量引用
  确认代码中引用环境变量的方式正确：

  • 客户端代码中使用process.env.REACT_APP_YOUR_VAR（对应框架前缀）
  • 服务端函数（Netlify Functions）中直接使用process.env.YOUR_VAR（无需前缀）
    避免拼写错误、大小写不一致的问题，比如配置的是API_KEY，代码里写成了Api_Key

• 验证构建过程是否注入变量
  确保你的构建命令是由Netlify执行，而非本地构建后上传静态文件。如果是本地构建后上传，Netlify的环境变量不会被注入到静态文件中，必须让Netlify在平台上执行构建命令。

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