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文件
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
UEditor是由百度web前端研发部开发的所见即所得的开源富文本编辑器，这篇文章主要介绍了如何在vue项目中使用UEditor--plus ,需要的朋友可以参考下2022-08-08
这篇文章主要介绍了Vue.js轮播图走马灯，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
Echarts，它是一个与框架无关的 JS 图表库，但是它基于Js，这样很多框架都能使用它，例如Vue，估计IONIC也能用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
递归 简单来讲就是程序自己调用自身,vue中的递归组件就是,组件自身调用自身,下面这篇文章主要给大家介绍了关于Vue3递归组件的用法,需要的朋友可以参考下2022-03-03
这篇文章主要介绍了Vue实现导入Excel功能,本文分步骤给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-07-07
Vue中的三种Props:模板Props、配置Props和状态Props详解
这篇文章介绍了Vue中的Props,主要有三种类型：模板Props、配置Props和状态Props,模板Props用于简单的数据传递和显示,配置Props用于调整组件的行为和外观,状态Props用于管理组件内部的动态数据,每种类型都有其应用场景,理解这些类型可以帮助你设计出更棒的组件2025-02-02
这篇文章主要介绍了vue中实现拖动调整左右两侧div的宽度的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
这篇文章主要介绍了在vue中实现某一些路由页面隐藏导航栏的功能操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
这篇文章主要为大家介绍了Vue中request.js封装及调用示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2023-09-09
这篇文章主要为大家介绍了Vue3之列表动画和状态动画示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-04-04
最新评论