Gridsome中Netlify CMS手动初始化的环境变量配置问题

咱们先拆解你遇到的核心问题：Netlify环境变量没正确加载，以及Gridsome客户端代码无法获取这些变量。

一、为什么环境变量拿不到？ #

1. Netlify配置的误区 #

你当前的netlify.toml里用了[context.release.environment]这种写法，这是自定义命名的Context，Netlify不会自动把它和同名分支关联起来——也就是说，除非你手动指定使用这个Context（比如通过CLI命令），否则部署release分支时，Netlify不会加载这个配置里的环境变量。

正确的分支匹配写法应该是针对具体分支名来配置Context，这样Netlify才能在部署对应分支时自动加载对应的环境变量。

2. Gridsome客户端环境变量的机制 #

Gridsome只会把以GRIDSOME_开头的环境变量在构建阶段注入到客户端代码里，但它不会自动把这些变量放到window对象里。你直接用window.GRIDSOME_CMS_BRANCH，客户端自然拿不到值，只能读到undefined，最终 fallback 到develop分支。

二、可行解决方案 #

步骤1：修正Netlify的环境变量配置 #

把netlify.toml里的Context配置改成分支匹配模式，确保部署对应分支时加载正确的变量：

# 当部署release分支时，使用这个环境变量
[context.branch="release"].environment
GRIDSOME_CMS_BRANCH = "release"

# 当部署stage分支时，使用这个环境变量
[context.branch="stage"].environment
GRIDSOME_CMS_BRANCH = "stage"

# 当部署develop分支时，使用这个环境变量
[context.branch="develop"].environment
GRIDSOME_CMS_BRANCH = "develop"

步骤2：修正Gridsome客户端代码的变量引用方式 #

有两种方式可以让客户端拿到正确的环境变量：

方式一：直接用process.env让Gridsome在构建时替换

修改/static/admin/index.js里的代码，改用process.env引用变量——Gridsome会在构建阶段读取环境变量的值，直接替换到代码里，打包后客户端就能拿到正确的分支名：

// 用process.env让Gridsome在构建时注入变量值
const branch = process.env.GRIDSOME_CMS_BRANCH || "develop"
window.CMS_MANUAL_INIT = true
const { CMS, initCMS: init } = window
init({ 
  config: { 
    backend: { 
      branch: `${branch}` 
    }, 
  }, 
})

方式二：显式将变量注入到window对象

如果你坚持想用window.GRIDSOME_CMS_BRANCH，可以在gridsome.config.js里添加一个内联脚本，在页面加载时把环境变量赋值到window：

module.exports = {
  head: {
    script: [
      {
        // 构建时Gridsome会替换process.env的值
        innerHTML: `window.GRIDSOME_CMS_BRANCH = "${process.env.GRIDSOME_CMS_BRANCH || 'develop'}"`,
        type: 'text/javascript',
        body: true // 放到页面底部，确保在admin的index.js之前执行
      }
    ]
  }
}

然后你的index.js代码可以保持原来的写法不变。

步骤3：验证部署 #

部署对应分支后，你可以在Netlify的部署详情页里查看部署日志，确认环境变量是否被正确加载；也可以打开网站的/admin页面，通过浏览器控制台查看branch变量的值是否符合预期。

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