每次发版都要强刷清除浏览器缓存问题
原理
将打包后的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,如果文件有改动就会响应200no-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 } })
以上为个人经验,希望能给大家一个参考,也希望大家多多支持阿兔在线工具。