Vue打包资源按时间戳方式

古辛

已于 2023-06-15 10:32:20 修改

阅读量1.4k

点赞数

分类专栏： Vue 文章标签： css vue.js html 前端

于 2023-06-15 10:25:37 首次发布

版权

3 篇文章

订阅专栏

文章讲述了在Vue项目中，由于浏览器缓存导致发版后可能出现引用旧版本资源的问题。为解决此问题，可以通过修改Vue.config.js文件，将资源文件名附加上当前时间戳，确保每次打包后的文件都是最新的，从而避免缓存问题，尽管这可能影响文件加载速度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

问题：

由于默认的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`)

.......