自定义Webpack构建的React结合Django项目调用process.env报错process未定义如何解决

错误原因 #

1. process是Node.js原生的全局对象，浏览器运行环境不存在这个变量，你直接在前端业务代码中调用require('dotenv').config()、读取process.env自然会报错。你之前了解的Create React App支持直接读取REACT_APP_开头的环境变量，是因为CRA内置了构建阶段的变量注入逻辑，你当前用的是自定义webpack配置，没有做对应的处理。
2. 你的启动命令存在路径问题：.env放在和package.json同级的项目根目录，但你执行构建时是cd到frontend/src目录下运行命令，dotenv默认读取执行命令的当前工作目录下的.env文件，就算你配了注入逻辑也找不到对应配置。

解决步骤 #

1. 安装dotenv对应的webpack插件，该插件会在构建阶段把.env里的变量注入到前端打包产物中：

npm install dotenv-webpack --save-dev

2. 修改webpack.config.js配置，引入并配置插件：

// 顶部新增引入
const Dotenv = require('dotenv-webpack');

module.exports = {
    resolve: {
        // 原有fallback配置保持不变
    },
    // 新增plugins配置项，和resolve、module平级
    plugins: [
        new Dotenv({
            path: './.env',
            systemvars: true
        })
    ],
    module: {
        // 原有rules配置保持不变
    }
};

3. 调整前端业务代码，删除require('dotenv').config()这行代码，直接读取变量即可：

const API_URL = process.env.REACT_APP_AXIOS_URL
console.log(API_URL)

4. 修正构建启动命令，切换到package.json所在的项目根目录执行构建：

(cd frontend && npm run dev)

多环境适配方案 #

如果要区分开发、生产环境的请求地址，只需要在项目根目录新建.env.development、.env.production两个文件，分别写入对应环境的REACT_APP_AXIOS_URL配置，再修改webpack的Dotenv插件配置即可自动适配：

const envPath = process.env.NODE_ENV === 'production' ? './.env.production' : './.env.development';
new Dotenv({
  path: envPath,
  systemvars: true
})

运行npm run dev时会自动读取开发环境配置，运行npm run prod时自动读取生产环境配置。

内容的提问来源于stack exchange，提问作者Joseph Adam