VUE 项目更新部署时，浏览器页面缓存问题

2022年7月28日 224次阅读 来源: 我是程序居

VUE

文章目录

前言

最近客户和我反应一个问题他们在服务器上更新包后，发现页面并没有更新，而且简单刷新浏览器页面也没有效果，必须要清理浏览器缓存，页面才会刷新。

提示：以下是本篇文章正文内容，下面案例可供参考

一、为什么会这样？

《VUE 项目更新部署时，浏览器页面缓存问题》

仔细看引用的js 发现更新前后 引用的JS路径是一样的，而js是从服务器上下载本地浏览器的，如果不刷新浏览器缓存。更新后引用JS，CSS，还有一些静态资源还都是浏览器缓存中

二、如何解决

既然引用地址没有变化，我们能不能将引用的JS，CSS 什么的名字变得都不一样不就行了吗。

1.具体操作

我们可以在vue 打包时，给js，css 加上一些参数后缀，具体操作是在vue项目的 vue.config.js 的 chainWebpack 填上这样一段代码即可

if (process.env.NODE_ENV === 'production') { 
      // 给js和css配置Timestamp
      config.output.filename('static/js/[name].' + Timestamp + '.js').end()
      config.output.chunkFilename('static/js/[name].' + Timestamp + '.js').end()
      config.plugin('extract-css').tap(args => [{ 
        filename: `static/css/[name].${ Timestamp}.css`,
        chunkFilename: `static/css/[name].${ Timestamp}.css`
      }])
      // 给img配置Timestamp
      config.module.rule('images').use('url-loader').tap(options => { 
        options.name = `static/img/[name].${ Timestamp}.[ext]`
        options.fallback = { 
          loader: 'file-loader',
          options: { 
            name: `static/img/[name].${ Timestamp}.[ext]`
          }
        }
        return options
      })
    }
    // Timestamp 时间设置的一个变量 直接在module.exports 上面 const Timestamp = new Date().getTime()

2.打包测试

《VUE 项目更新部署时，浏览器页面缓存问题》
发现直接刷新浏览器 发现 JS 后参数带上我设置的时间戳，测试成功。这样我们只需要更新项目后，点击浏览器刷新即可刷新页面了

总结

注意点 这段代码是操作 我的图片标签的， 如果你使用了其他标签，都可用这段代码进行操作 

 config.module.rule('images').use('url-loader').tap(options => { 
        options.name = `static/img/[name].${ Timestamp}.[ext]`
        options.fallback = { 
          loader: 'file-loader',
          options: { 
            name: `static/img/[name].${ Timestamp}.[ext]`
          }
        }
        return options
      })

if (process.env.NODE_ENV === 'production') {

这段是判断我们的打包生产环境的，一定要带上。不然本地的DEV环境是无法启动的。

    原文作者：我是程序居
    原文地址: https://blog.csdn.net/weixin_46140240/article/details/122726362
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞