7

我正在尝试使用该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. 谁能给我一些见解？

4

4 回答 4

9

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

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

于 2019-11-02T12:26:56.440 回答
3

我认为您可以设置一个自定义的 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文件中的这些示例。

于 2019-07-30T21:01:35.710 回答
2

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

echo $SECRET_KEY

但它返回undefined，为什么？因为在生产模式下.env不会看到文件。因此，如果您认真使用该dotenv-webpack插件，则应该path像您的代码一样通过 for development：

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

而对于生产，有两种方式：

  1. 直接传入 webpack 配置：
plugins: [
  new webpack.DefinePlugin({
    'process.env': {
      'SECRET_KEY': '123456'
    },
  }),
],
  1. 填写服务器环境变量。对于我更喜欢​​使用的简单 Linux 服务器export SECRET_KEY=123456，但对于 Heroku，请阅读这篇文章

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

于 2020-03-11T21:00:25.657 回答
-1

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

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

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

于 2019-01-18T22:50:39.803 回答