将 dotenv 模块与 React 一起使用

Question

我的应用程序dependencies中有dotenv。按照指示，我有一个.env文件，里面是NODE_ENV=development.

在我的main.js文件中，我正在运行一个简单的require('dotenv').config();但是当我访问process.env时，我期望一个对象，然后我得到{}

我在这里做错了什么？谢谢

Answer 1

dotenv只适用于服务器端。要在客户端将.env与 webpack 一起使用，请使用 dotenv-webpack。

1. 安装软件包，yarn add dotenv-webpack -D或npm install dotenv-webpack --save

2. 将其添加到您的 Webpack 配置文件中。

   // webpack.config.js 
   const Dotenv = require('dotenv-webpack');
   module.exports = {
   ...
   plugins: [
   new Dotenv({
   path: './.env', // Path to .env file (this is the default) 
   safe: true // load .env.example (defaults to "false" which does not use dotenv-safe) 
   })
   ]
   ...
   };

3. 将.env添加到.gitignore文件

注意：您的 .env 文件可能包含敏感信息。因此，dotenv-webpack只会将代码中显式引用的环境变量公开给最终捆绑包。