生产中的 Dotenv-webpack？

Question

我正在尝试使用该dotenv-webpack插件。这在本地效果很好。但是当我部署到 Heroku 时失败了。

我已经根据这个git issue遵循了建议，但仍然有问题。

我的 webpack 配置如下所示：

const path = require('path');
const Dotenv = require('dotenv-webpack');

module.exports = {
  context: path.join(__dirname, '/src'),

  entry: {
    javascript: './js/index'
  },

output: {
  filename: 'bundle.js',
  path: path.join(__dirname, '/dist'),
},

resolve: {
  alias: {
    react: path.join(__dirname, 'node_modules', 'react')
  },
  extensions: ['.js', '.jsx'],
},

module: {
  rules: [
  {
    test: /\.jsx?$/,
    exclude: /node_modules/,
    loaders: ['babel-loader'],
  },
  {
    test: /\.html$/,
    loader: 'file?name=[name].[ext]',
  },
 ],
},
plugins: [
  new Dotenv({
    path: path.resolve(__dirname,'.env')
  }),
 ]
};

我期望dotenv插件的编写方式如上，它将.env在构建时解析我的文件（位于项目的根目录，以及 webpack.config），从而使我的项目可以访问 env vars。相反，环境变量是undefined, 在 Heroku 中。我在 Heroku 中设置了一个 env var。密钥设置为类似SECRET_KEY. 值设置为类似123456. 谁能给我一些见解？

Answer 1

我不使用 Heroku，也没有尝试过。但我明白，如果你在 Heroku 仪表板上定义了变量，那么这些变量就是系统变量，所以你需要使用systemvars: true“dotenv-webpack”选项。

作为声明（我再说一遍，我从未使用过 Heroku）：所有这些都取决于 Heroku 部署的工作方式，如果您在 Heroku 内部构建应用程序（您在 Heroku 内部调用 Webpack）那么它可以工作，但是如果您将构建的应用程序发送到 Heroku （您不在 Heroku 内部调用 Webpack）然后它不起作用。

Answer 2

根据dotenv的文档，您不使用从文件中读取和解析内容的config方法。.env

顺便说一句，由于您正在处理 webpack，我建议使用dotenv-webpack包。给定的文档显示了基本配置的示例以及一些其他可行的参数。

如果您对专门在 React 中设置环境变量的其他方法感兴趣，我推荐此链接详细文章。