Compartir tecnología

한어Русский языкEnglishFrançaisIndonesianSanskrit日本語DeutschPortuguêsΕλληνικάespañolItalianoSuomalainenLatina

Recientemente, encontré el problema mencionado en el título y utilicé la primera solución. Después de eso, me conecté a Internet para leer las soluciones de los expertos técnicos y resumí el siguiente artículo.

Método 1: interfaz pura
Cada vez que empaquete para su lanzamiento, use webpack para crear un archivo version.json. El contenido del archivo es una cadena aleatoria (yo uso una marca de tiempo). Este archivo se actualizará automáticamente cada vez que lo empaquete.
En el proyecto, el archivo version.json se solicita escuchando eventos de clic.Utilice el caché local para almacenar la última cadena generada y compárela con la cadena solicitada esta vez; si las cadenas son diferentes, significa que hay una nueva actualización de contenido en el proyecto y el usuario puede actualizar o borrar el caché.

Método 2: cooperación entre el front-end y el back-end
Agregue el número de versión publicada al encabezado de cada solicitud y compárelo con el último número de versión retenido en el cliente. Si es inconsistente, fuerce una actualización y guarde el número de versión actual después de la actualización.
lograr:
1. Webpack crea y genera un archivo json. Cree una carpeta de complementos en el directorio del proyecto y cree un nuevo archivo versión-webpack-plugin.js.
Webpack4**** y otros métodos de construcción de versiones altas

/** Customized plug-in: Generate version number json file */const fs = require("fs");class VersionPlugin {  apply(compiler) {    // emit is an asynchronous hook, use tapAsync to touch it, you can also use tapPromise/tap (synchronous)    compiler.hooks.emit.tap("Version Plugin", (compilation) => {      const outputPath = compiler.path || compilation.options.output.path;      const versionFile = outputPath + "/version.json";      const timestamp = Date.now(); // timestamp as version number      const content = `{"version": "${timestamp}"}`;      /** Returns true if the path exists, false otherwise */      if (!fs.existsSync(outputPath)) {        // Create directories synchronously. Returns undefined or the path to the first directory created if recursive is true. This is the synchronous version of fs.mkdir().        fs.mkdirSync(outputPath, { recursive: true });      }      // Generate json file      fs.writeFileSync(versionFile, content, {        encoding: "utf8",        flag: "w",      });    });  }}module.exports = { VersionPlugin };
1

método de compilación de versión baja de webpack3

/** Customized plug-in: Generate version number json file */const fs = require('fs')class VersionPlugin {  apply(compiler) {    compiler.plugin('done', function () {      // Copy the logic of the file, and the file has been compiled.      const outputPath = compiler.outputPath      const versionFile = outputPath + '/version.json'      const timestamp = Date.now() // 时间戳作为版本号      const content = `{"version": "${timestamp}"}`      /** Returns true if the path exists, false otherwise. */      if (!fs.existsSync(outputPath)) {        // Create directories synchronously. Returns undefined or the path to the first directory created if recursive is true. This is the synchronous version of fs.mkdir().        fs.mkdirSync(outputPath, { recursive: true })      }      // Generate json file      fs.writeFileSync(versionFile, content, {        encoding: 'utf8',        flag: 'w'      })    })  }}module.exports = { VersionPlugin }
1

2. Utilice este complemento en vue.config.js

const { VersionPlugin } = require('./src/plugin/version-webpack-plugin')

config.plugins.push(new VersionPlugin())
1
2
3

3. Cada vez que se ejecuta el comando de compilación del paquete web, se generará un archivo version.json en el directorio dist. Hay un campo llamado versión y el valor es la marca de tiempo durante la compilación. Cada compilación generará una nueva marca de tiempo.


4. Inicie una solicitud ajax, solicite el archivo version.json para obtener la marca de tiempo de la versión y compárelo con la última marca de tiempo guardada localmente. Si es diferente, realice la operación correspondiente. /business/version.json, business es el prefijo de mi proyecto, cámbielo a la dirección de su propio proyecto y podrá solicitar el archivo version.json.

import axios from 'axios'
import i18n from '@/i18n'
import UpdateMessage from '@/components/common/UpdateProject/index.js'
export function reloadVersion() {  
axios.get(window.location.origin + '/mobile/version.json?v=' + Date.now()).then(rsp => {    
let mobileVersion = localStorage.getItem('mobileVersion')   
let onlineVersion = rsp.data.version    
if (!mobileVersion) {      
localStorage.setItem('mobileVersion', onlineVersion)  return }    
if (onlineVersion) {      
if (mobileVersion !== onlineVersion) {        
UpdateMessage.success({          
title: i18n.t('bulk.pleaseWait'),          
msg: i18n.t('common.updateRemind')        
})        
setTimeout(() => {          
UpdateMessage.close()          
localStorage.setItem('mobileVersion', onlineVersion)          
window.location.reload();        
}, 2000);      
}    
}  
})}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

5. Cuando se inicia la solicitud, puede usar un temporizador o verificar la versión al cambiar de página. Elija el horario de llamada adecuado según su situación real.

async mounted() {  
process.env.NODE_ENV !== 'development' && window.addEventListener('mousedown', this.handleonmousedown);},
beforeDestroy() { 
 window.removeEventListener('mousedown', this.handleonmousedown)},
handleonmousedown() {   
reloadVersion()
}
1
2
3
4
5
6
7