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
	}
})
Logo

前往低代码交流专区

更多推荐