如何为多个环境设置环境变量？答案

【问题标题】：How do I setup environment variables for multiple environments?如何为多个环境设置环境变量？
【发布时间】：2020-02-14 09:45:24
【问题描述】：

我有一个 Next.js 应用程序，我目前有这个 next.config.js 设置，可以在本地工作时访问我的 .env 文件，效果很好：

// Initialize doteenv library
require("dotenv").config();

module.exports = {
  webpack: config => {
    // Fixes npm packages that depend on `fs` module
    config.node = {
      fs: "empty"
    };
    /**
     * Returns environment variables as an object
     */
    const env = Object.keys(process.env).reduce((acc, curr) => {
      acc[`process.env.${curr}`] = JSON.stringify(process.env[curr]);
      return acc;
    }, {});

    /** Allows you to create global constants which can be configured
     * at compile time, which in our case is our environment variables
     */
    config.plugins.push(new webpack.DefinePlugin(env));
    return config;
  }
};

但是，当应用程序构建在实时 (platform.sh) 环境中时，我需要访问 platform.sh 变量而不是我的 .env 变量。 Platform.sh 提供了这段代码 sn -p 作为例子：

function read_base64_json(varName) {
  try {
    return JSON.parse(new Buffer(process.env[varName], 'base64').toString());
  } catch (err) {
    throw new Error(`no ${varName} environment variable`);
  }
};

// A simple variable.
let projectId = process.env.PLATFORM_PROJECT;

// A JSON-encoded value.
let variables = read_base64_json('PLATFORM_VARIABLES');

但是我不确定在哪里使用它以及它如何工作，以便它在本地使用我的 .env 文件并在实时环境中使用 platform.sh 变量。最好的方法是什么？

【问题讨论】：

标签： javascript reactjs webpack environment-variables next.js

【解决方案1】：

在您的 webpack.config 中，您可以像这样重新配置插件部分

plugins: [
    new webpack.DefinePlugin({
      VARIABLE_NAME:
        process.env.NODE_ENV === "production"
          ? VARIABLE_PRODUCTION_VALUE
          : VARIABLE_LOCAL_VALUE
    })
  ]

您可以在应用中的任何位置使用 VARIABLE_NAME，它会根据环境而变化。

【讨论】：

【解决方案2】：

dotenv 用文件内容覆盖您的环境变量。你可能想在你的构建钩子中rm .env。

【讨论】：