如何为多服务器部署的React(Vite)应用读取本地.env文件？

Vite 默认会在构建阶段把 .env 里的变量注入到代码中，打包后就固定死了，没法在运行时修改。要实现「一份构建包适配多服务器」，可以换个思路，把配置放到运行时加载的文件里：

1. 在项目的 public 目录下创建全局配置文件 #

直接在 public 里新建一个 app-config.js 文件（这个目录下的文件会原封不动复制到 dist 目录，不会被编译），内容如下：

// 这里写当前服务器对应的API地址
window.appConfig = {
  API_URL: "https://api.serverA.com"
};

2. 在React应用中使用全局配置 #

不用再依赖 import.meta.env，直接从全局对象里取配置。比如封装API请求的时候：

import axios from 'axios';

// 从window全局读取API地址
const apiClient = axios.create({
  baseURL: window.appConfig.API_URL,
  timeout: 10000,
});

// 后续接口请求都用这个实例
export default apiClient;

3. 部署时修改配置文件 #

把打包好的 dist 目录上传到目标服务器后，找到 dist/app-config.js，把里面的 API_URL 改成对应服务器的地址（比如 https://api.serverB.com）即可，完全不需要重新构建项目。

补充说明 #

如果非要用 .env 格式的文件，也可以在服务器的静态目录下放一个 .env，然后在应用初始化时用 fetch 读取并解析，但这种方式需要处理异步加载的状态（比如显示加载中），不如直接用全局JS文件简单直接。

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