Vue 项目中禁用浏览器缓存配置

发表于 阅读次数： 评论数： 本文字数： 240 阅读时长 ≈ 1 分钟

前言

前端项目发布新版本时，会经常遇到需要清理缓存的问题，以下是 Vue 项目禁用缓存的方法。

HTML 内容

在 HTML 页面（如 index.html）的 <head> 标签中添加 meta 配置。

1
2
3
<meta http-equiv="pragram" content="no-cache" />
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate" />
<meta http-equiv="expires" content="0" />

Vue Cli 构建

针对 Vue3 以下版本，在 vue.config.js 新增配置内容，将时间戳作为打包编译后的文件名称的一部分。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const Timestamp = new Date().getTime()
module.exports = {
  configureWebpack: {
    output: { // 输出重构，打包编译后的文件名称 【模块名称.版本号(可选).时间戳】
      filename: `[name].${Timestamp}.js`,
      chunkFilename: `[name].${Timestamp}.js`
    },
  },
  css: {
    extract: { // 打包后css文件名称添加时间戳
      filename: `css/[name].${Timestamp}.css`,
      chunkFilename: `css/[name].${Timestamp}.css`
    }
  },
}

Nginx 配置

禁用掉 Nginx 缓存，让浏览器每次到服务器去请求文件，而不是在浏览器中读取缓存文件。值得一提的是，以下配置只对 HTML 文件有效。

1
2
3
location ~ .*\.(?:htm|html)$ {
    add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
}

参考资料