Después de actualizar el proyecto vue, el archivo existe en la memoria caché y debe actualizarse para generar la actualización.

prefacio

Cada vez que se lanza una nueva versión del proyecto Vue, los probadores deben forzar una actualización para actualizar el código del navegador para verificar errores. Para los usuarios, esto es aún más irrazonable. Por lo tanto, encuentre una manera de permitir que el navegador actualice automáticamente el archivo.

comenzar

1. Cree una nueva versión.json en el directorio estático estático y cambie el número de versión en cada versión

{
    
    
    "version": "1.0.1"
}

2. Cree un nuevo archivo libs/versionUpdate.js en src

import axios from 'axios'
 
const isNewVersion = () => {
    
    
  let url = `//${
      
      window.location.host}/static/version.json?t=${
      
      new Date().getTime()}`;
  axios.get(url).then(res => {
    
    
    if (res.status === 200) {
    
    
      let vueVersion = res.data.version;
      let localVueVersion = localStorage.getItem('vueVersion');
      if (localVueVersion && localVueVersion != vueVersion) {
    
    
        localStorage.setItem('vueVersion', vueVersion);
        window.location.reload();
        return;
      } else {
    
    
        localStorage.setItem('vueVersion', vueVersion);
      }
    }
  });
}
 
export default {
    
    
  isNewVersion
}

3. Escriba la intercepción de ruta global, siempre que el número de versión sea diferente cada vez, vuelva a cargar la página y coopere con el primer paso para borrar el caché del navegador

import versionTood from '@/libs/versionUpdate'
 
router.beforeEach(( to, from, next ) => {
    
    
  //判断当前代码版本是否与服务器中代码版本一致，如不一致则刷新页面获取最新
  versionTood.isNewVersion();