从CRA迁移到Vite后，浏览器中.env变量不更新的问题排查

核心原因 #

Vite开发模式下会缓存环境变量相关构建产物，同时浏览器本地缓存、API库打包时的变量固化逻辑，都可能导致修改.env后新变量无法即时生效，不同浏览器缓存策略差异也会表现出不一致的异常。

解决步骤 #

• 强制清除Vite缓存
  修改.env后重启开发服务器时添加--force参数，彻底清除Vite的缓存：

  npm start -- --force
  

  也可以直接删除项目根目录下的node_modules/.vite缓存文件夹。

• 禁用浏览器开发环境缓存
  在浏览器开发者工具的「网络」面板中勾选「禁用缓存」（需保持开发者工具开启），避免浏览器读取旧的静态资源缓存。

• 保证API库动态读取环境变量
  不要在rollup打包API库时固化环境变量，库代码要在运行时读取消费端的import.meta.env，比如：

  // API库代码示例
  export const getApiBaseUrl = () => import.meta.env.VITE_API_BASE_URL;
  

  而非直接赋值const apiBaseUrl = import.meta.env.VITE_API_BASE_URL，确保每次运行时获取最新变量。

• 检查Vite环境变量配置
  确认消费端.env文件中的变量名严格以VITE_开头，且vite.config.js/ts中没有提前固化环境变量的逻辑。

• 手动清理浏览器站点缓存
  若浏览器缓存顽固，直接清理对应站点的缓存：

  • Chromium系：设置→隐私和安全→清除浏览数据→仅勾选「缓存的图片和文件」
  • Firefox：设置→隐私与安全→Cookie和站点数据→清除数据→勾选「缓存的Web内容」

额外提示 #

• 生产环境修改.env后必须重新构建才能生效，无法依赖热更新。
• 若使用Vite相关插件，确保插件版本为最新，避免插件自身的缓存bug。

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