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文件
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了Vue.delete()删除对象的属性说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中子组件如何间接修改父组件传递过来的值问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-05-05
这篇文章主要介绍了vue中动态路由加载组件,找不到module问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-06-06
这篇文章主要介绍了关于Vue中v-show中添加表达式用于判断是否显示的问题,很多朋友经常会遇到这样的需求，有数据来源和标签类型两行选项，需要实现点击上面的某个数据来源时，标签类型自动切换功能，感兴趣的朋友一起看看吧2018-03-03
这篇文章主要为大家详细介绍了vue实现移动端的开关按钮，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-02-02
这篇文章主要介绍了Vue实现页面跳转方式及传参方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-03-03
这篇文章主要介绍了如何利用Vue实现一个春节抽福卡页面，采用了卡牌翻转的形式。文中的实现方法讲解详细，快跟随小编一起学习一下吧2022-02-02
Vue element-ui中表格过长内容隐藏显示的实现方式
在Vue项目中,使用ElementUI渲染表格数据时,如果某一个列数值长度超过列宽,会默认换行,造成显示不友好,下面这篇文章主要给大家介绍了关于Vue element-ui中表格过长内容隐藏显示的实现方式,需要的朋友可以参考下2022-09-09
解决vue elementUI 使用el-select 时 change事件的触发问题
这篇文章主要介绍了解决vue elementUI 使用el-select 时 change事件的触发问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
使用vue-router切换页面时，获取上一页url以及当前页面url的方法
这篇文章主要介绍了使用vue-router切换页面时，获取上一页url以及当前页面url的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-05-05
最新评论