what-to-eat/ENV_RELOAD_SOLUTION.md

环境变量自动刷新解决方案

问题描述

当修改 .env 文件后，网站仍然使用缓存的旧配置，需要手动点击重置才能加载最新的环境变量配置。

解决方案

自动刷新机制

• 应用启动时自动检测环境变量是否有变化
• 如果检测到变化，自动清除配置缓存并刷新页面
• 无需用户手动操作，完全自动化处理

使用方法

自动刷新（推荐）

1. 修改 .env 文件
2. 刷新浏览器页面或重新打开网站
3. 系统会自动检测到变化并刷新页面应用最新配置

手动重置（备用方案）

1. 修改 .env 文件
2. 打开设置页面（点击右上角设置图标）
3. 点击"恢复默认"按钮
4. 手动刷新浏览器页面

技术实现

环境变量监听器 (src/utils/envWatcher.js)

• 在应用启动时创建环境变量快照
• 将快照存储在 localStorage 中
• 下次启动时比较快照检测变化
• 自动清除缓存并刷新页面

设置存储优化 (src/stores/settings.js)

• 添加 reloadEnvSettings() 方法
• 优化重置逻辑，确保读取最新配置

应用启动集成 (src/main.ts)

• 在应用挂载前检查环境变量变化
• 自动执行刷新操作

工作流程

1. 首次访问：创建环境变量快照并存储
2. 修改.env 文件：环境变量发生变化
3. 再次访问：
   • 检测到环境变量变化
   • 自动清除 localStorage 中的配置缓存
   • 自动刷新页面
   • 应用加载最新的环境变量配置

注意事项

1. Vite 环境变量特性：Vite 的环境变量在构建时确定，运行时无法动态更新，因此需要刷新页面
2. 缓存机制：系统会缓存用户的自定义配置，只有在检测到环境变量变化时才会清除缓存
3. 自动化处理：用户无需手动操作，系统会自动处理环境变量的更新

最佳实践

1. 修改 .env 文件后，直接刷新浏览器页面即可
2. 系统会自动检测并应用最新配置
3. 如果遇到问题，可以使用设置页面的"恢复默认"功能作为备用方案