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实现图形验证码

    vue实现图形验证码

    这篇文章主要为大家详细介绍了vue实现图形验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-04-04
  • uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能

    uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能

    支付功能在我们日常开发中经常会遇到,下面这篇文章主要给大家介绍了关于uniapp前端支付篇之微信、抖音、快手、h5四个平台支付功能的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-03-03
  • 基于vue3和element plus实现甘特图

    基于vue3和element plus实现甘特图

    甘特图是一种重要的项目管理工具,它可以通过图形化的方式展示项目的进度和时间表,甘特图通常由一个横轴和一个纵轴组成,甘特图对于项目管理非常重要,所以本文给大家介绍了如何基于vue3和element plus实现甘特图,需要的朋友可以参考下
    2024-06-06
  • Vue中使用防抖与节流的方法

    Vue中使用防抖与节流的方法

    这篇文章主要为大家介绍了Vue中使用防抖与节流的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • vue项目的创建的步骤(图文教程)

    vue项目的创建的步骤(图文教程)

    本文主要介绍了vue项目的创建的步骤(图文教程),文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-03-03
  • vue项目环境搭建

    vue项目环境搭建

    这篇文章介绍了vue项目环境搭建的方法,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-04-04
  • Vue配置环境变量的正确打开方式

    Vue配置环境变量的正确打开方式

    这篇文章主要为大家介绍了Vue配置环境变量,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2022-01-01
  • Vue.js在数组中插入重复数据的实现代码

    Vue.js在数组中插入重复数据的实现代码

    这篇文章主要介绍了Vue.js在数组中插入重复数据的实现代码,需要的朋友可以参考下
    2017-11-11
  • vue elementui 实现图片上传后拖拽排序功能示例代码

    vue elementui 实现图片上传后拖拽排序功能示例代码

    这篇文章主要介绍了vue elementui 实现图片上传后拖拽排序功能,本文通过示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-01-01
  • vue组件实现进度条效果

    vue组件实现进度条效果

    这篇文章主要为大家详细介绍了vue组件实现进度条效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-06-06

最新评论