Vue.js预约系统客户端浏览器缓存问题排查与解决求助

问题背景 #

我基于Vue.js开发了一款预约系统，使用Vite打包，域名DNS托管在Cloudflare，部署于Render平台。此前修复了移动端输入框隐藏的bug并发布新版本，但部分客户端仍加载数月前的旧版本，缓存问题严重。

新版本index.html头部片段：

<head>
...
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<script type="9c3c08ece36f7e7da5ac819f-module" crossorigin src="/assets/index-8fc1e8fd.js"></script>
<link rel="stylesheet" href="/assets/index-7b5d238a.css">
</head>

旧版本index.html头部片段：

<head>
...
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<link href="/js/app.88668f01.js" rel="preload" as="script">
<link href="/js/chunk-vendors.44ce8375.js" rel="preload" as="script">
<link href="/css/chunk-vendors.513cdde5.css" rel="stylesheet">
<link href="/css/app.949f4bc7.css" rel="stylesheet">
...
</head>

已尝试但无效的方案：
- 在Cloudflare禁用域名缓存并清除全量缓存
- 静态资源已通过哈希值实现版本控制
- index.html添加了禁止缓存的meta标签

Render平台无法配置服务端缓存规则，官方声明不使用缓存。推测index.html及关联JS文件被客户端或中间节点缓存，需有效解决办法。

---

### 可行解决措施

#### 1. 强化Cloudflare针对index.html的缓存规则
虽然已禁用缓存，但需确保index.html的缓存策略被严格执行：
- 进入Cloudflare控制台「缓存」→「缓存规则」，创建专属规则：
  - 匹配条件：`URI equals "/"` 或 `URI ends with "/index.html"`
  - 缓存行为设置为**「绕过缓存」**
  - 同时设置「浏览器缓存TTL」为0秒，「边缘缓存TTL」为0秒
- 执行「缓存」→「配置」→「清除缓存」，选择「清除整个缓存」，等待生效

#### 2. 用HTTP响应头替代meta标签控制缓存
meta标签的缓存优先级低于HTTP响应头，Render支持通过`_headers`文件配置响应头：
在项目public目录下创建`_headers`文件，内容如下：

/*
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0
/index.html
Cache-Control: no-cache, no-store, must-revalidate
Pragma: no-cache
Expires: 0

重新部署后，Render会为对应路径注入这些响应头，强制浏览器不缓存index.html。

#### 3. 强制客户端刷新的临时方案
- **URL添加版本参数**：引导用户访问带版本号的URL（如`https://yourdomain.com?v=20240520`），浏览器会将其视为新资源，强制请求最新index.html。
- **旧版本检测逻辑**：若能推送一次临时更新，可在入口JS中加入版本检测代码，提示用户刷新：
  ```javascript
  // 检测新版本资源是否存在，存在则提示刷新
  fetch('/assets/index-8fc1e8fd.js', { method: 'HEAD' })
    .then(res => {
      if (res.ok && window.location.href.indexOf('v=') === -1) {
        if (confirm('发现新版本，请刷新页面以修复问题！')) {
          window.location.reload(true); // 强制绕过缓存刷新
        }
      }
    })
    .catch(() => {});

4. 配置Service Worker自动更新

使用vite-plugin-pwa插件实现PWA功能，让Service Worker自动检测并更新版本：

1. 安装插件：npm install vite-plugin-pwa --save-dev
2. 修改vite.config.js：

   import { VitePWA } from 'vite-plugin-pwa';
   
   export default defineConfig({
     plugins: [
       vue(),
       VitePWA({
         registerType: 'autoUpdate',
         workbox: {
           globPatterns: ['**/*.{js,css,html,ico,png,svg}']
         },
         manifest: {
           name: '预约系统',
           short_name: '预约',
           start_url: '/',
           display: 'standalone',
           background_color: '#ffffff',
           theme_color: '#41b883'
         }
       })
     ]
   });
   

   部署后，Service Worker会自动检测新版本，触发页面刷新，彻底解决缓存问题。

5. 排查中间缓存节点

• 用curl -I https://yourdomain.com查看响应头的CF-Cache-Status，若显示DYNAMIC或MISS，说明Cloudflare未缓存；若显示HIT，则缓存规则未生效。
• 让用户用隐私模式打开页面，判断是否为浏览器本地缓存；若隐私模式正常，指导用户手动清除浏览器缓存：设置→隐私和安全→清除浏览数据→勾选缓存文件和图片。

6. 子域名更换的补充方案

若以上方法均无效，更换子域名（如app.yourdomain.com→newapp.yourdomain.com）可绕过缓存，但需同时配置好HTTP响应头和Cloudflare规则，避免未来复发。

内容的提问来源于stack exchange，提问作者Joel G Mathew