Gatsby运行时用console.log测试环境变量及非前缀变量生效疑问

一、怎么在gatsby develop状态下测试环境变量？ #

其实操作很直观，按这几步来就行：

• 先确认配置到位：.env.development文件里已经写好测试变量（比如GATSBY_TEST_VAR=hello-world），且NODE_ENV已设为development（Windows PowerShell里可以临时执行$env:NODE_ENV="development"，或者在系统环境变量里做持久化设置）。
• 在前端组件里添加打印代码：比如打开src/pages/index.js，在组件函数里加一行console.log("测试环境变量：", process.env.GATSBY_TEST_VAR)，保存文件。
• 启动gatsby develop，打开浏览器站点后，打开开发者工具的Console面板，就能看到输出结果了。
• 如果要在Gatsby的Node端文件（如gatsby-config.js、gatsby-node.js）里测试，直接在文件里加console.log(process.env.TEST_VAR)，启动gatsby develop时，PowerShell终端会直接输出变量值。

二、为什么不带GATSBY_前缀的变量也能输出？ #

得分两种场景来解释：

1. 在Node端文件（如gatsby-config.js）里能输出 #

这是完全正常的！这些文件运行在Node.js环境中，你通过require("dotenv").config(...)加载.env文件后，所有变量都会被注入到Node的process.env对象里，不管有没有GATSBY_前缀，Node环境都能直接访问。Gatsby的前缀规则只针对**浏览器端（前端组件）**的变量注入，Node端不受限制。

2. 在前端组件里能输出不带前缀的变量 #

这种情况属于不符合预期的例外，大概率是这些原因：

• 变量是Windows系统环境变量：Node.js会自动加载系统级环境变量到process.env，而Gatsby在开发环境的webpack配置中，可能没严格过滤这些系统变量，导致它们被意外注入到浏览器端。但生产环境（gatsby build）下，不带前缀的变量会被严格过滤，不会出现在打包后的代码里。
• 手动注入了全局上下文：比如在gatsby-browser.js或gatsby-ssr.js里，你把不带前缀的变量挂载到了window对象上，前端组件自然能直接访问到。
• 版本兼容问题：如果你的Gatsby版本较旧，可能存在webpack配置疏漏，导致未过滤非前缀变量。建议升级到稳定版，严格遵循官方规范给前端用的变量加GATSBY_前缀。

要注意：即使开发环境下不带前缀的变量能正常输出，也绝对不要依赖这个行为！生产环境下Gatsby会彻底过滤掉这些变量，到时候代码会因找不到变量报错，一定要给前端需要访问的变量加上GATSBY_前缀。

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