Vue如何实现打包资源按时间戳方式
更新时间:2024年05月31日 15:09:43 作者:古辛
这篇文章主要介绍了Vue如何实现打包资源按时间戳方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue打包资源按时间戳
问题
由于默认的Vue打包是基于资源文件的hash模式,但是由于浏览器缓存,在实际发版过程中会出现引用老版本的问题。
解决
修改Vue资源打包,在资源文件后加上打包时间戳,以保证每次发版后,所有资源均为最新,避免缓存引用问题,尽管牺牲掉发版后文件加载的效能问题,但是也解决了潜在的缓存问题。
修改
修改“vue.config.js”文件配置:
const Timestamp = new Date().getTime(); module.exports = { ....... css: { extract: { filename: `css/[name].${Timestamp}.css`, chunkFilename: `css/[name].${Timestamp}.css` } }, chainWebpack: config => { config.output.filename(`js/[name].${Timestamp}.js`) config.output.chunkFilename(`js/[name].${Timestamp}.js`) .......
vue打包添加时间戳,实现更新项目自动清除缓存(webpack/vue-cli打包两种方式)
本来vue打包会自动用chunkhash来解决缓存问题,但是部分浏览器不会自动更新,因此通过增加时间戳不同来实现自动重新加载文件,保持最新的界面。
webpack打包
修改build/webpack.prod.conf.js文件
使用vue-cli打包
修改vue.config.js文件
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能
支付功能在我们日常开发中经常会遇到,下面这篇文章主要给大家介绍了关于uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下2024-03-03vue elementui 实现图片上传后拖拽排序功能示例代码
这篇文章主要介绍了vue elementui 实现图片上传后拖拽排序功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下2023-01-01
最新评论