Netlify UI设置的环境变量在本地dev和线上均为undefined如何解决？

问题原因及解决方法 #

你遇到的是Netlify环境变量暴露的典型问题，核心原因和对应解决方案如下：

• 最常见原因：前端客户端代码不能直接读取无特殊前缀的环境变量
  process.env是Node.js运行时的全局变量，默认仅能在Netlify的服务端资源（比如Netlify Functions无服务器函数）中直接访问。前端运行在浏览器侧，构建时框架默认会过滤掉无指定前缀的环境变量，避免敏感信息泄露到客户端：
  • 如果你用Vite构建：变量名需要加VITE_前缀，比如改为VITE_AUTH0_DOMAIN，代码中通过import.meta.env.VITE_AUTH0_DOMAIN读取，不能用process.env
  • 如果你用Create React App构建：变量名需要加REACT_APP_前缀，代码中通过process.env.REACT_APP_AUTH0_DOMAIN读取
  • 如果你用Vue CLI构建：变量名需要加VUE_APP_前缀
  • 如果你用Next.js构建：需要暴露给客户端的变量要加NEXT_PUBLIC_前缀
• 其他可能原因排查
  1. 变量名拼写、大小写和Netlify UI中设置的完全一致，Netlify环境变量区分大小写
  2. 本地开发修改完环境变量后，需要重启ntl dev服务生效；线上修改完变量后需要重新触发部署才会生效
  3. 检查项目根目录的netlify.toml文件，是否存在同名的环境变量配置，toml配置的优先级高于UI设置，会覆盖UI中的值
  4. 本地开发需要先执行ntl env:pull将Netlify UI中设置的环境变量同步到本地的.env文件，否则ntl dev可能读取不到最新配置
  5. 如果你是在Netlify Functions服务端代码中读取变量依旧为undefined，检查变量设置时是否勾选了对应部署环境的作用域，不要仅勾选了分支预览/生产环境的其中一个

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