VUE项目浏览器缓存处理方案

测试：“你们是不是没部署啊，代码怎么没生效”

开发：“清下缓存看看”

我cao！这个问题在困惑了测试几个月之后，终于提出要解决了，相信更多前端小伙伴都遇到过类似的问题，直接上干货。

问题描述

由于浏览器缓存策略，在每次更新版本之后，刷新页面不能直接拿到最新的资源，需要手动清除缓存。

解决思路

1、改变前端项目入口页 /index.html 缓存策略，通过修改 nginx 配置，禁止缓存index.html（入口页面一般比较小，1-2k）

2、前端项目打包时，给 /public/index.html 文件中引入的静态资源 css、js 加上版本号，如果没有通过<link href=”xxx” /> ，<script src=”xxx”></script> 引入静态资源或者都是通过 import 的方式引入的，可以跳过此步骤

实现方案

1、修改 nginx 配置

server {
    listen       80;
    listen  [::]:80;
    server_name  localhost;
    client_header_timeout 600s;
    client_max_body_size 1024m;
 
    location / {
        root   /usr/share/nginx/html;
        index  index.html index.htm;
        try_files $uri $uri/ /index.html;
 
        # 不缓存 html、htm 结尾的文件
        if ($request_filename ~* .*\.(?:html|htm)$) {
            add_header Cache-Control no-store always;
        }
    }
 
    # ......
}

2、给静态资源添加版本号，以 vuecli4 项目为例。

vue.config.js

module.exports = defineConfig({
  pages: {
    index: {
      entry: 'src/main.js',
      template: 'public/index.html',
      filename: 'index.html',
    },
  },
  chainWebpack: config => {
    config
      .plugin('html-index')
      .tap(args => {
        console.log(args)
        args[0].version = "1.0.0" // 可以从package.json 获取，也可以时间戳
        return args
    })
  },
  // ......
}

/public/index.html

<link href="static/css/reset.css?v=<%= htmlWebpackPlugin.options.version %>" rel="stylesheet" />
<link href="static/css/custom.css?v=<%= htmlWebpackPlugin.options.version %>" rel="stylesheet" />
<script src="static/js/custom.js?v=<%= htmlWebpackPlugin.options.version %>"></script>

相关报错

1、Error: Cannot call .tap() on a plugin that has not yet been defined. Call plugin('html').use(<Plugin>) first. 

即使 plugin(“html”).use(“HtmlWebpackPlugin”) 也无法解决

2、TypeError: Cannot set properties of undefined (setting 'version') 

因为 args 是空数组，args[0].version 肯定报错，这里是因为 pages 配置多入口的属性导致，通过命令 vue inspect > webpack.config.js 生成文件并查看结果，找到 chainWebpack 中 config.plugin(‘html-index’) 我们需要的入口名。