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

VUE

文章目录

  • 前言
  • 一、为什么会这样?
  • 二、如何解决
    • 1.具体操作
    • 2.打包测试
  • 总结


前言

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


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

一、为什么会这样?

VUE 项目更新部署时,浏览器页面缓存问题_第1张图片

仔细看引用的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 项目更新部署时,浏览器页面缓存问题_第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环境是无法启动的。

你可能感兴趣的:(vue.js,缓存,前端)