javascript - Netflify CMS 手动初始化(Gridsome)中的环境变量

Question

我正在使用 Gridsome 和 Netlify CMS 构建一个网站，由 Netlify 托管。 Netlify CMS 的内容位于 /static/admin。 我在 index.js 中手动初始化 Netlify CMS，以根据环境变量更改它推送的分支。

const branch = window.GRIDSOME_CMS_BRANCH || "develop"
window.CMS_MANUAL_INIT = true
const { CMS, initCMS: init } = window

init({
    config: {
        backend: {
            branch: `${branch}`
        },
    },
})

我在 netlify.toml 文件中设置这些环境变量，如下所示:

[context.release.environment]
    GRIDSOME_CMS_BRANCH = "release"

[context.stage.environment]
    GRIDSOME_CMS_BRANCH = "stage"

[context.develop.environment]
    GRIDSOME_CMS_BRANCH = "develop"

但是当我构建并导航到 mysite.com/admin 以访问 CMS 时，分支始终是 develop 并且环境变量是 undefined。我尝试了很多不同的东西，我想我对这种情况下的环境变量有一些基本的误解。如果有人能帮助我并向我解释这些内容或提供可行的解决方案，我会很高兴。

提前致谢并干杯!

Answer 1

我有一个类似的问题，我使用本文中描述的技术解决了 https://medium.com/@trekinbami/using-environment-variables-in-react-6b0a99d83cf5

如果您需要在客户端访问环境变量(这是初始化 Netlify CMS 的地方)，您可以使用 webpack 在构建时为您存储该值。

您可以在 Netlify CMS 的 webpack 配置中执行类似的操作:

const webpack = require('webpack');
const getRepoInfo = require('git-repo-info')

const { branch } = getRepoInfo()

module.exports = () => {
  return {
    plugins: [
      new webpack.DefinePlugin({
        'process.env.GRIDSOME_CMS_BRANCH': JSON.stringify(branch)
      })
    ]
  };

上述代码在构建时在服务器上执行，但使变量 process.env.GRIDSOME_CMS_BRANCH 在运行时可供客户端使用。