Question

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

我已根据此git问题遵循建议，但仍然遇到问题：https://github.com/mrsteele/dotenv-webpack/issues/121

我的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一起位于项目的根目录），从而为我的项目提供访问权限到环境变量。而是在Heroku中未定义env var。我在Heroku中设置了一个环境变量。密钥设置为SECRET_KEY之类的内容。值设置为123456。有人可以给我一些见识吗？谢谢。

Answer 1

基于 dotenv 的documentation，您无需使用 config 方法来读取和解析.env文件中的内容

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

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

Answer 2

我认为您可以改为设置自定义Webpack插件。

const path = require('path');
const webpack = require('webpack')
module.exports = {
  entry: './src/index.js',
  mode: 'production',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  node: {
    fs: 'empty'
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
         'API_KEY': JSON.stringify(process.env.API_KEY)
      }
    })
  ]
};

像在webpack.prod.js中的这些示例

Answer 3

实际上，此问题来自Heroku服务器的环境值。因为在生产模式dotenv中调用真实环境变量，我的意思是：

echo $SECRET_KEY

但是它返回undefined，为什么呢？因为在生产模式下不会显示.env文件。因此，如果您认真使用dotenv-webpack插件，则应将path传递给开发人员，就像您的代码一样：

plugins: [
  new Dotenv({
    path: path.resolve(process.cwd(), '.env'),
  }),
 ],

对于生产来说，有两种方法：

直接在webpack配置中传递：

plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'SECRET_KEY': '123456'
    },
  }),
],

填写服务器环境变量。对于简单的Linux服务器，我更喜欢使用export SECRET_KEY=123456，但对于Heroku，请阅读this article

提示：在其他情况下，例如使用Docker或Kubernetes，需要使用映像或群集配置文件来传递环境变量。

Answer 4

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

声明（重复一次，我从未使用过Heroku）：所有这些取决于Heroku部署的工作方式，如果您在Heroku内部构建应用程序（您在Heroku内部调用Webpack），那么它就可以工作，但是如果您将构建的应用程序发送至Heroku（您不在Heroku内部调用Webpack）那就行不通了。

Dotenv-webpack正在生产中？

4 个答案: