React使用process.env.PUBLIC_URL报错process未定义如何解决

process是Node.js环境的专属全局变量，浏览器环境默认不存在这个变量，你遇到的报错本质就是你的React项目构建工具没有把process全局变量注入到前端运行环境中。
不同构建工具的注入规则不同：

• 如果你用的是create-react-app官方脚手架（Webpack构建），默认会自动注入process.env.NODE_ENV、process.env.PUBLIC_URL两个内置变量，以及所有带REACT_APP_前缀的自定义环境变量，正常不会出现这个报错。如果出现，检查是否自己修改了webpack配置，删除了原有的环境变量注入逻辑。
• 如果你用的是Vite构建的React项目，Vite默认不会注入process全局变量，所有环境变量需要通过import.meta.env访问，这是最常见的报错原因。

方案1：适配Vite构建规则（推荐） #

直接将代码中所有process.env的写法替换为Vite的标准写法：

• process.env.NODE_ENV 替换为 import.meta.env.MODE
• process.env.PUBLIC_URL 替换为 import.meta.env.BASE_URL
  修改后的代码如下：

const config = {};
export default config;

const SetConfigFile = () => {
    console.log(import.meta.env.BASE_URL);
    switch (import.meta.env.MODE) {
        case "development":
            return "config.dev.json";
        case "test":
            return "config.test.json";
        case "production":
            switch(import.meta.env.BASE_URL){
                case "https://example.com":
                    return "config.devp.json"
                default:
                    return "config.prod.json";
            }                     
        default:
            return "config.default.json";
    }
}

const Load = () => {
    return fetch(SetConfigFile())
        .then(result => result.json())
        .then((newconfig) => {
            for (let prop in config) {
                delete config[prop]
            }
            for (let prop in newconfig) {
                config[prop] = newconfig[prop];
            }
            return config;
        });
}
export { Load }

方案2：手动注入process全局变量（兼容旧代码用） #

如果不想修改原有代码的写法，可以在构建配置中手动注入process全局变量：

Vite项目 #

在vite.config.js中添加如下配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  define: {
    'process.env': process.env
  }
})

Webpack项目 #

在webpack配置的plugins字段添加如下配置：

new webpack.DefinePlugin({
  'process.env': JSON.stringify(process.env)
})

内容的提问来源于stack exchange，提问作者Cagri Tacyildiz