前端vue项目部署中，用户还在访问系统，存在缓存问题，部署后需要ctrlF5强制刷新，解决热更新的几种方案

问题描述：

问题是这样的，在部署的时候，用户并没有关闭浏览器还保持访问操风系统管理项目的页面中。这样才会产生问题缓存；如果在部署的时候或者部署之前，用户并没有打开系统页面，部署完成后，才访问操风系统，不会存在缓存的。我刚才测试了一下。要想解决，部署之前或在部署中，用户还再使用的情况下，前端得写定时获取版本号，如果本地的版本号小于服务端的版本号，自动给他强制更新一下。

1.纯前端解决：需要每次打包之前，手动更改版本号，每次切换页面路由会调用版本号对比

https://blog.csdn.net/qq_34701838/article/details/124959358

（Vue-cli代码控制）

1.在public静态目录下新建version.json每次发版更改里面的版本号 

{

    "version": "0.0.1"

}

2.在src中新建 libs/versionUpdate.js文件

import axios from 'axios'

const isNewVersion = () => {

  let url = `//${window.location.host}/version.json?t=${new Date().getTime()}`

  axios.get(url).then(res => {

    if (res.status === 200) {

      let vueVersion = res.data.version || '1.0.0'

      let localVueVersion = localStorage.getItem('vueVersion')

      localStorage.setItem('vueVersion', vueVersion)

      if (localVueVersion && localVueVersion != vueVersion) {

        alert('检测到新版本，请点击确认刷新页面哦')

        window.location.reload(true)

        return

      }

    }

  })

}

export default {

  isNewVersion

}

3.在全局路由拦截中写，只要每次版本号不同就重新加载页面配合第一步就可以清楚浏览器缓存

import versionTood from '@/libs/versionUpdate'

router.beforeEach(( to, from, next ) => {

  //判断当前代码版本是否与服务器中代码版本一致，如不一致则刷新页面获取最新

  versionTood.isNewVersion();

}

 2.方案二，修改文件（自己尝试过了，不行）

https://www.cnblogs.com/songjuntao/p/16163337.html

前言

  部署前端项目以后，你会发现一个问题（为什么必须刷新页面，页面才会更新到最新版本），其实就是因为服务器缓存的问题，接下来我就以我自己所用的方案来解决自动清除缓存的问题。

一、根目录index.html

在head标签中，加入下面的代码

<meta http-equiv="pragram" content="no-cache"><meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">

• 1
• 2

二、配置vue.config.js

直接上代码【使用时间戳】

 代码如下（示例）：

const Version = new Date().getTime()

module.exports = {

css: {

   loaderOptions: {

     sass: {

       data: `@import "@/components/themes/_handle.scss";`

     }

   },

   // 是否使用css分离插件 ExtractTextPlugin

   extract: {

     // 修改打包后css文件名   // css打包文件，添加时间戳

     filename: `static/css/[name].${Version}.css`,   // 此处static/css/xxx 目录根据自己打包情况来定,我使用的就没有static一层,所以直接去掉static即可。根据自己项目决定

     chunkFilename: `static/css/[name].${Version}.css`

   }

},

configureWebpack: {

output: { // 输出重构  打包编译后的 文件名称  【模块名称.版本号.时间戳】

     // filename: utils.assetsPath('js/[name].[chunkhash].'+Version+'js'),

     // chunkFilename: utils.assetsPath('js/[id].[chunkhash].'+Version+'js')

     filename: `static/js/[name].${Version}.js`,         // js打包文件，添加时间戳

     chunkFilename: `static/js/[name].${Version}.js`

   }

},

chainWebpack(config) {

// img的文件名修改   // img打包文件，添加时间戳

   config.module

     .rule('images')

     .use('url-loader')

     .tap(options => {

       options.name = `static/img/[name].${Version}.[ext]`

       options.fallback = {

         loader: 'file-loader',

         options: {

           name: `static/img/[name].${Version}.[ext]`

         }

       }

       return options

     })

}

}

3. 修改nginx服务器：

1. 前端不缓存html，防止程序更新后缓存继续生效

    location / {
         # 不缓存html，防止程序更新后缓存继续生效
          if ($request_filename ~* .*\.(?:htm|html)$) {
            add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
            access_log on;
          } 
    }