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.打包测试

发现直接刷新浏览器 发现 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环境是无法启动的。