背景
最近在开发最近在开发一个前端项目的时候，遇到一个非常棘手的缓存问题，这里记录下最后的解决方案。
部署流程：普通的vue H5项目，嵌入到app显示，部署就是打包后复制到nginx的一个目录下。
现状：在测试环境ok，但是部署到开发环境就一直不生效。（大概10-30分钟才生效）
尝试
1、app卸载重装无效。直接使用浏览器访问无效（但是手机浏览器生效时间比嵌入的webview要快）。确认的确是缓存问题。
2、代码确认没有使用cdn，Service Worker，app也没有做webview的缓存配置（测试环境是ok的）
3、nginx增加index.html缓存配置，禁用index.html的缓存，但是没有效果
location /osc-H5-prod/ {
alias /var/www/html/osc-H5-prod/;
index index.html;
try_files $uri $uri/ /osc-H5-prod/index.html;
location = /osc-H5-prod/index.html {
add_header Cache-Control "no-cache, no-store, must-revalidate";
add_header Pragma "no-cache";
add_header Expires "0";
}
}
2、在osc-H5-prod同级目录，新增osc-H5-prod123目录，可以生效。 但是把osc-H5-prod123改成osc-H5-prod，又不能生效。即便是把osc-H5-prod中的index.html 换成index.html1，页面依然可以访问，但是把osc-H5-prod删掉，页面会报错，不删除就是旧的，好像只要osc-H5-prod目录存在，就访问的缓存数据。
临时解决方案
在APP加载H5页面的URL后面追加一个动态的时间戳或版本号参数，例如：
http://yourdomain.com/osc-H5-prod/index.html?_v=1715500000
每次点击链接打开的时候，都更新时间戳。
这会使每次请求的 URL 对于缓存系统来说都是“新的”，从而绕过大部分基于 URL 的缓存。但这只是权宜之计，治标不治本。