vue项目强制清除页面缓存的例子

要强制清除页面缓存，可以通过添加版本号或者随机字符串的方式来实现。

添加版本号

1. 在vue.config.js文件中的output选项中添加chunkFilename配置项来配置生成的chunk文件名:

output: {
    filename: "js/[name].[hash:8].js",
    chunkFilename: "js/[name].[hash:8].[chunkhash:8].js",
},

其中，[chunkhash:8]是表示chunkhash值只保留前8位。chunkhash值是根据文件内容生成的，只要文件内容不变，该值就不变。

1. 在index.html中获取chunk文件的引用路径时，在filename后面加上query参数?v=加上版本号或者时间戳等:

<script src="js/app.xxxxxxx.js?v=1.0.0"></script>
<script src="js/chunk1.xxxxxxx.js?v=1.0.0"></script>
<script src="js/chunk2.xxxxxxx.js?v=1.0.0"></script>

这样每次发布新版本时，只需要修改query参数即可。

添加随机字符串

1. 在vue.config.js文件中的output选项中添加chunkFilename配置项来配置生成的chunk文件名:

output: {
    filename: "js/[name].[hash:8].js",
    chunkFilename: "js/[name].[hash:8].[chunkhash:8].js",
},

1. 在index.html中获取chunk文件的引用路径时，在filename后面加上随机字符串，这里可以通过工具函数产生一个随机字符串:

<script src="js/app.xxxxxxx.js?v=<%= getRandomStr(6) %>"></script>
<script src="js/chunk1.xxxxxxx.js?v=<%= getRandomStr(6) %>"></script>
<script src="js/chunk2.xxxxxxx.js?v=<%= getRandomStr(6) %>"></script>

其中<%= %>是EJS的语法，表示在运行时执行该表达式，getRandomStr(6)是一个工具函数，用来生成6位随机字符串。

这样，每次加载页面时，随机字符串会发生变化，浏览器就会重新请求资源，从而实现强制清除缓存的效果。

以上是两种设置强制清除缓存的方式，可以根据自己的需要灵活选择。