Vue3 + Vite 项目部署后浏览器缓存导致标题错误

Vue3 + Vite 浏览器缓存问题解决方案

问题现象分析

部署后浏览器显示旧标题"申报系统"，实际应为"问卷系统"。清除缓存后正常，用户访问仍显示错误标题。核心原因是浏览器默认缓存了旧版HTML文件。

缓存机制解析

默认缓存行为：浏览器自动缓存HTML/CSS/JS等资源
相同域名问题：未配置缓存策略时，旧版index.html会被持续缓存
响应头缺失 ：缺少Cache-Control等HTTP头导致缓存不受控

Nginx配置方案（推荐）

nginx 复制代码

server {
    # 精确匹配index.html禁用缓存
    location = /index.html {
        add_header Cache-Control "no-cache, no-store, must-revalidate";
        add_header Pragma "no-cache";
        add_header Expires "0";
    }

    # 带hash的静态资源长期缓存
    location ~* \.(js|css|png|jpg|woff2)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # 其他HTML文件处理
    location / {
        try_files $uri $uri/ /index.html;
        add_header Cache-Control "no-cache";
    }
}

HTML元标记补充

在index.html的<head>中添加：

html 复制代码

<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">

环境变量配置

.env.production：

properties 复制代码

VITE_APP_TITLE=问卷系统
VITE_BASE_PATH=/

vite.config.ts：

typescript 复制代码

export default defineConfig({
  plugins: [
    createHtmlPlugin({
      inject: {
        data: {
          title: env.VITE_APP_TITLE
        }
      }
    })
  ]
})

部署验证流程

执行构建命令：

bash 复制代码

npm run build

检查响应头：

http 复制代码

GET /index.html
Cache-Control: no-cache

测试步骤：

首次访问确认标题正确
强制刷新（Ctrl+F5）
检查Network面板响应头

缓存策略对比表

资源类型	建议策略	技术实现
index.html	禁用缓存	`Cache-Control: no-cache`
带hash资源	长期缓存	`immutable`+`max-age=31536000`
API接口	不缓存	后端配置`no-store`

进阶优化建议

使用版本化部署路径（如/v2/index.html）
实现灰度发布机制
添加ETag指纹校验
对CDN配置单独缓存规则

故障排查清单

确认Nginx配置已重载
检查构建产物是否包含最新标题
使用隐身窗口测试避免插件干扰
通过curl验证响应头：

bash 复制代码

curl -I https://example.com/index.html

此方案通过多层防护确保标题更新及时生效，同时保持静态资源缓存优势，兼顾性能与准确性。实际部署时应根据具体基础设施调整配置细节。