vue 部署上线清除浏览器缓存

最新推荐文章于 2025-03-24 09:11:37 发布

原创

最新推荐文章于 2025-03-24 09:11:37 发布 · 6k 阅读

标签

#vue.js #javascript #webpack

收录于

本文介绍了Vue项目部署时如何处理浏览器缓存问题，包括修改index.html头部设置、配置Nginx禁用html缓存、打包文件名添加时间戳以及利用package.json版本更新实现页面自动刷新。通过这些方法，可以确保用户每次访问都能获取最新资源，提升用户体验。

vue 部署上线清除浏览器缓存

本文借鉴https://blog.csdn.net/weixin_43299180/article/details/116271209

vue 项目打包上线之后，每一次都会有浏览器缓存问题，需要手动的清除缓存。这样用户体验非常不好，所以我们在打包部署的时候需要尽量避免浏览器的缓存。下面是我的解决方案：

一、修改根目录index.html

在 head 里面添加下面代码

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

这种会让所有的css/js资源重新加载

二、配置 nginx 不缓存 html

vue默认配置，打包后css和js的名字后面都加了哈希值，不会有缓存问题。但是index.html在服务器端可能是有缓存的，需要在服务器配置不让缓存index.html

server {
listen 80;
server_name yourdomain.com;
location / {
    try_files $uri $uri/ /index.html;
    root /yourdir/;
    index index.html index.htm;

    if ($request_filename ~* .*\.(?:htm|html)$)
    {
        add_header Cache-Control "no-cache, no-store";  //对html文件设置永远不缓存
    }  
  }
}

no-cache浏览器会缓存，但刷新