Technologieaustausch

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

Kürzlich bin ich auf das im Titel erwähnte Problem gestoßen und habe die erste Lösung verwendet. Danach habe ich online die Lösungen technischer Experten gelesen und den folgenden Artikel zusammengefasst.

Methode 1: Reines Frontend
Verwenden Sie jedes Mal, wenn Sie für die Veröffentlichung packen, eine version.json-Datei. Der Inhalt der Datei ist eine zufällige Zeichenfolge (ich verwende einen Zeitstempel). Diese Datei wird jedes Mal automatisch aktualisiert, wenn Sie sie packen.
Im Projekt wird die Datei version.json durch Abhören von Klickereignissen angefordert.Verwenden Sie den lokalen Cache, um die zuletzt generierte Zeichenfolge zu speichern und mit der diesmal angeforderten Zeichenfolge zu vergleichen. Wenn die Zeichenfolgen unterschiedlich sind, bedeutet dies, dass im Projekt eine neue Inhaltsaktualisierung vorliegt und der Benutzer den Cache aktualisieren oder leeren kann.

Methode 2: Zusammenarbeit zwischen Front- und Backend
Fügen Sie die veröffentlichte Versionsnummer zum Header jeder Anfrage hinzu und vergleichen Sie sie mit der letzten auf dem Client gespeicherten Versionsnummer. Wenn sie inkonsistent ist, erzwingen Sie eine Aktualisierung und speichern Sie die aktuelle Versionsnummer nach der Aktualisierung.
erreichen:
1. Webpack erstellt und generiert eine JSON-Datei. Erstellen Sie einen Plugins-Ordner im Projektverzeichnis und eine neue Datei version-webpack-plugin.js.
Webpack4**** und andere Hochversions-Konstruktionsmethoden

/** 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

Webpack3-Build-Methode für niedrige Versionen

/** 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. Verwenden Sie dieses Plugin in vue.config.js

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

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

3. Jedes Mal, wenn der Webpack-Build-Befehl ausgeführt wird, wird im dist-Verzeichnis eine Datei namens „version“ generiert, und der Wert ist der Zeitstempel während des Builds.


4. Initiieren Sie eine Ajax-Anfrage, fordern Sie die Datei version.json an, um den Versionszeitstempel zu erhalten, und vergleichen Sie ihn mit dem zuletzt lokal gespeicherten Zeitstempel. Führen Sie den entsprechenden Vorgang aus. /business/version.json, „business“ ist das Präfix meines Projekts. Ändern Sie es in Ihre eigene Projektadresse und Sie können die Datei „version.json“ anfordern.

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. Wenn die Anfrage initiiert wird, können Sie einen Timer verwenden oder die Version beim Seitenwechsel überprüfen. Wählen Sie den passenden Anrufzeitpunkt basierend auf Ihrer tatsächlichen Situation.

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