vue中清除浏览器缓存得方法

1.在HTTP协议中，只有后端返回 expires 或 Cache-Control:max-age=XXX，前端才缓存。但在浏览器中，默认会对 html css js 等静态文件、以及重定向进行缓存，如果在HEAD头中指定：<HEAD><METAHTTP-EQUIV="Pragma"CONTENT="no-cache"><METAHTTP-EQUIV="Cache-

『LXL』

5993人浏览 · 2021-03-30 09:00:07

『LXL』 · 2021-03-30 09:00:07 发布

1.在HTTP协议中，只有后端返回 expires 或 Cache-Control:max-age=XXX，前端才缓存。
但在浏览器中，默认会对 html css js 等静态文件、以及重定向进行缓存，如果在HEAD头中指定：

<HEAD>
	<METAHTTP-EQUIV="Pragma"CONTENT="no-cache">
	<METAHTTP-EQUIV="Cache-Control"CONTENT="no-cache">
	<METAHTTP-EQUIV="Expires"CONTENT="0">
</HEAD>

这种方法浏览器不会缓存html，但是还是会对重定向缓存，并且这种方式并不规范，可能有的浏览器不支持。

2.最常用的方法就是，在打包的时候给每个打包文件加上hash 值，一般是在文件后面加上时间戳或者随机数
//在vue.config.js 文件中，找到output：

const Timestamp = new Date().getTime()
output: { // 输出重构 打包编译后的 文件名称 【模块名称.版本号.时间戳】
	filename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`,
	chunkFilename: `[name].${process.env.VUE_APP_Version}.${Timestamp}.js`
}

3.在脚本加载时加入一个时间戳，修改 webpack.prod.conf.js 文件。(未使用过该方法，需要实践)

const version = new Date().getTime();
new HtmlWebpackPlugin({
	filename: config.build.index,
	template: 'index.html',
	inject: true,
	hash: version,
	favicon: resolve('icon.ico'),
	title: 'vue-admin-template',
	minify: {
		removeComments: true,
		collapseWhitespace: true,
		removeAttributeQuotes: true
	}
})

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^