Compartilhamento de tecnologia

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

Recentemente encontrei o problema mencionado no título e usei a primeira solução. Depois disso, acessei a Internet para ler as soluções de especialistas técnicos e resumi o artigo a seguir.

Método 1: front-end puro
Cada vez que você empacota para lançamento, use o webpack para construir um arquivo version.json. O conteúdo do arquivo é uma string aleatória (eu uso um carimbo de data/hora).
No projeto, o arquivo version.json é solicitado ouvindo eventos de clique.Use o cache local para armazenar a última string gerada e compare-a com a string solicitada desta vez. Se as strings forem diferentes, significa que há uma nova atualização de conteúdo no projeto e o usuário pode atualizar ou limpar o cache;

Método 2: Cooperação entre front e back-ends
Adicione o número da versão lançada ao cabeçalho de cada solicitação e compare-o com o último número da versão retido no cliente. Se for inconsistente, a atualização será forçada e o número da versão atual será salvo após a atualização.
concluir:
1. O Webpack constrói e gera um arquivo json. Crie uma pasta de plugins no diretório do projeto e crie um novo arquivo version-webpack-plugin.js.
Webpack4**** e outros métodos de construção de versão alta

/** 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 construção de versão baixa do 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. Use este plugin em vue.config.js

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

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

3. Cada vez que o comando de construção do webpack for executado, um arquivo version.json será gerado no diretório dist. Existe um campo chamado versão e o valor é o carimbo de data / hora durante a construção.


4. Inicie uma solicitação ajax, solicite o arquivo version.json para obter o carimbo de data/hora da versão e compare-o com o último carimbo de data/hora salvo localmente. Se for diferente, execute a operação correspondente. /business/version.json, business é o prefixo do meu projeto, altere-o para o endereço do seu próprio projeto, desde que você possa solicitar o arquivo 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. Quando a solicitação é iniciada, você pode usar um cronômetro ou verificar a versão ao trocar de página. Escolha o horário de chamada apropriado com base na sua situação 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