您现在的位置是:网站首页> 编程资料编程资料
Vue如何解决每次发版都要强刷清除浏览器缓存问题_vue.js_
2023-05-24
930人已围观
简介 Vue如何解决每次发版都要强刷清除浏览器缓存问题_vue.js_
每次发版都要强刷清除浏览器缓存问题
原理
将打包后的js和css文件,加上打包时的时间戳
1.index.html
在 public 目录下的index.html文件里添加如下代码:
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标签
(不推荐此方法)
(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 } })以上为个人经验,希望能给大家一个参考,也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- vue中使用keep-alive动态删除已缓存组件方式_vue.js_
- uniapp开发安卓App实现高德地图路线规划导航功能的全过程_javascript技巧_
- react 路由权限动态菜单方案配置react-router-auth-plus_React_
- Composition API思想封装NProgress示例详解_vue.js_
- 关于element中el-cascader的使用方式_vue.js_
- vue实现前端保持筛选条件到url并进行同步参数设计_vue.js_
- vant中如何修改用户的头像_vue.js_
- vue在标签中如何使用(data-XXX)自定义属性并获取_vue.js_
- JavaScript实现网页带动画返回顶部的方法详解_javascript技巧_
- JS实现刷新网页后之前浏览位置保持不变示例详解_JavaScript_
