Vue如何解决每次发版都要强刷清除浏览器缓存问题

目录 每次发版都要强刷清除浏览器缓存问题 原理 vue 强制清除浏览器缓存 （1）最基本的方法就是 （2）在html文件中加入meta标签 （3）需要后端陪着,进行nginx配置　 （4）在脚本加载时加入一个时间戳

每次发版都要强刷清除浏览器缓存问题

原理

将打包后的js和css文件，加上打包时的时间戳

1.index.html

在 public 目录下的index.html文件里添加如下代码：

<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">

2.vue.config.js

在vue.config.js中，配置相关打包配置，代码如下：

let timeStamp = new Date().getTime();
module.exports = {
? ? publicPath: "./",
? ? filenameHashing: false,
? ? // 打包配置
? ? configureWebpack: {
? ? ? ? output: { // 输出重构 打包编译后的js文件名称,添加时间戳.
? ? ? ? ? ? filename: `js/js[name].${timeStamp}.js`,
? ? ? ? ? ? chunkFilename: `js/chunk.[id].${timeStamp}.js`,
? ? ? ? }
? ? },
? ? css: {
? ? ? ? extract: { // 打包后css文件名称添加时间戳
? ? ? ? ? ? filename: `css/[name].${timeStamp}.css`,
? ? ? ? ? ? chunkFilename: `css/chunk.[id].${timeStamp}.css`,
? ? ? ? }
? ? }
};

filename 指列在entry 中，打包后输出的文件的名称。 chunkFilename 指未列在entry 中，却又需要被打包出来的文件的名称。

vue 强制清除浏览器缓存

（1）最基本的方法就是

在打包的时候给每个打包文件加上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`
?
? ? }

（2）在html文件中加入meta标签

（不推荐此方法）

<meta http-equiv="pragram" content="no-cache">
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
<meta name="viewport" content="width=device-width,initial-scale=1.0">

（3）需要后端陪着,进行nginx配置　

location = /index.html {
? ? add_header Cache-Control "no-cache, no-store";
}

原因： 第二种方法浏览器也会出现缓存，配置之后禁止html 出现缓存

no-cache, no-store可以只设置一个

no-cache 浏览器会缓存，但刷新页面或者重新打开时 会请求服务器，服务器可以响应304，如果文件有改动就会响应200 no-store 浏览器不缓存，刷新页面需要重新下载页面

（4）在脚本加载时加入一个时间戳

修改 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如何解决每次发版都要强刷清除浏览器缓存问题的详细内容...