Κοινή χρήση τεχνολογίας

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

Πρόσφατα, αντιμετώπισα το πρόβλημα που αναφέρεται στον τίτλο και χρησιμοποίησα την πρώτη λύση. Μετά από αυτό, μπήκα στο διαδίκτυο για να διαβάσω τις λύσεις των τεχνικών και συνόψισα το παρακάτω άρθρο.

Μέθοδος 1: Καθαρή πρόσοψη
Κάθε φορά που πακετάρετε για κυκλοφορία, χρησιμοποιήστε το webpack για να δημιουργήσετε ένα αρχείο version.json.
Στο έργο, το αρχείο version.json ζητείται ακούγοντας συμβάντα κλικ.Χρησιμοποιήστε την τοπική κρυφή μνήμη για να αποθηκεύσετε την τελευταία συμβολοσειρά που δημιουργήθηκε και να τη συγκρίνετε με τη συμβολοσειρά που ζητήθηκε αυτή τη φορά, εάν οι συμβολοσειρές είναι διαφορετικές, αυτό σημαίνει ότι υπάρχει μια νέα ενημέρωση περιεχομένου στο έργο και ο χρήστης μπορεί να ανανεώσει ή να διαγράψει την κρυφή μνήμη.

Μέθοδος 2: Συνεργασία μεταξύ εμπρός και πίσω άκρων
Προσθέστε τον αριθμό έκδοσης που κυκλοφόρησε στην κεφαλίδα κάθε αιτήματος και συγκρίνετε τον με τον αριθμό της τελευταίας έκδοσης που διατηρείται στον υπολογιστή-πελάτη, εάν είναι ασυνεπής, αναγκάστε μια ανανέωση και αποθηκεύστε τον αριθμό της τρέχουσας έκδοσης μετά την ανανέωση.
ολοκληρώσει:
1. Το Webpack δημιουργεί και δημιουργεί ένα αρχείο json Δημιουργήστε έναν φάκελο plugins στον κατάλογο του έργου και δημιουργήστε ένα νέο αρχείο version-webpack-plugin.js.
Webpack4**** και άλλες μεθόδους κατασκευής υψηλής έκδοσης

/** 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 χαμηλής έκδοσης

/** 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. Χρησιμοποιήστε αυτήν την προσθήκη στο vue.config.js

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

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

3. Κάθε φορά που εκτελείται η εντολή δημιουργίας webpack, θα δημιουργείται ένα αρχείο version.json στον κατάλογο dist. Υπάρχει ένα πεδίο που ονομάζεται έκδοση και η τιμή είναι η χρονική σήμανση κατά τη διάρκεια της κατασκευής.


4. Ξεκινήστε ένα αίτημα ajax, ζητήστε από το αρχείο version.json να αποκτήσει τη χρονική σήμανση έκδοσης και συγκρίνετε το με την τελευταία χρονική σήμανση που αποθηκεύτηκε τοπικά, εάν είναι διαφορετική, εκτελέστε την αντίστοιχη λειτουργία. /business/version.json, το business είναι το πρόθεμα του έργου μου, αλλάξτε το στη δική σας διεύθυνση έργου και μπορείτε να ζητήσετε το αρχείο 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. Όταν εκκινηθεί το αίτημα, μπορείτε να χρησιμοποιήσετε ένα χρονόμετρο ή να επαληθεύσετε την έκδοση κατά την εναλλαγή σελίδων. Επιλέξτε τον κατάλληλο χρόνο κλήσης με βάση την πραγματική σας κατάσταση.

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