如何在生产环境中修改React Vite项目的.env配置？

Vite在生产构建阶段，会将所有VITE_前缀的环境变量静态替换到打包后的代码中，不会将.env.production文件打包到构建目录里，所以你找不到这个文件是正常现象。要修改VITE_API_URL，可以按以下几种方式操作：

方法1：重新构建（推荐，最稳妥） #

• 本地修改项目根目录下的.env.production文件，将VITE_API_URL的值改为https://api.admin.another-domain.tld
• 执行生产构建命令：

  npm run build
  # 或 yarn build / pnpm build，根据你使用的包管理器
  

• 将新生成的构建产物（默认是dist目录）重新部署到服务器

方法2：直接修改打包后的代码（临时应急） #

如果暂时无法重新构建，可以直接修改服务器上的构建产物：

• 找到构建目录（通常是dist）下的JS chunk文件（一般在assets文件夹内，文件名类似index.[hash].js）
• 用文本编辑器打开文件，搜索旧的API地址https://api.admin.example.com，替换为新的地址
• 注意：如果代码开启了压缩混淆，搜索时可能需要匹配压缩后的字符串片段；并且下次构建会覆盖这个修改，仅适合临时场景

方法3：提前抽离可配置项（长期优化方案） #

为了避免后续频繁重新构建，可以把可变的配置抽离到静态文件中：

1. 在项目的public目录下新建config.js，内容如下：

   window.APP_CONFIG = {
     API_URL: 'https://api.admin.example.com',
     SITE_URL: 'https://example.com'
   }
   

2. 在项目的index.html中引入这个文件：

   <script src="/config.js"></script>
   

3. 项目代码中不再直接使用import.meta.env.VITE_API_URL，而是改用window.APP_CONFIG.API_URL
4. 构建部署后，直接修改服务器上public/config.js里的API_URL值即可，无需重新构建

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