解决IIS部署vue项目，文件缓存问题

_陈柱伟_

已于 2024-07-16 17:14:43 修改

阅读量247

点赞数 5

分类专栏：项目部署文章标签： vue.js 缓存前端

于 2024-07-16 16:43:55 首次发布

本文链接：https://blog.csdn.net/czw15913934496/article/details/140470641

版权

项目部署专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、具体流程

（1）IIS安装URL 重写模块

安装成功后如图

（2）IIS配置URL 重写匹配规则

添加一条规则（我的模式是匹配所有文件的，匹配模式需要自行查阅）

（3）根据匹配规则，重写文件的响应头

RESPONSE_Cache-Control=private, no-store, no-cache, must-revalidate, proxy-revalidate

（4）vue项目中index.html增加meta标签

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

二、存在问题

（1）一直以来我都有困惑，为啥我vue项目打包出来的文件是带有哈希值的，但浏览器依旧存在缓存，导致页面代码没有更新

【问题解答】vue打包出来的文件中index.html没有hash值，浏览器采用了缓存的index.html文件，导致访问的js等文件路径参数没有变化，所以js上的hash值无法解决页面缓存问题。

（2）我在index.html的<head>中加入了禁止缓存的meta，但是未生效

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

【问题解答】仅设置meta是无效的，需要配合服务器禁用缓存，才有效