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

最新推荐文章于 2025-11-23 21:15:47 发布

原创最新推荐文章于 2025-11-23 21:15:47 发布 · 271 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#缓存

项目部署专栏收录该内容

1 篇文章

订阅专栏

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

问题现象分析

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

缓存机制解析

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

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>中添加：

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

环境变量配置

.env.production：

VITE_APP_TITLE=问卷系统
VITE_BASE_PATH=/

vite.config.ts：

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