Обмен технологиями

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

Недавно я столкнулся с проблемой, упомянутой в заголовке, и использовал первое решение. После этого я зашел в Интернет, чтобы прочитать решения технических экспертов, и резюмировал следующую статью.

Метод 1: чистый интерфейс
Каждый раз, когда вы собираете пакет для выпуска, используйте webpack для создания файла version.json. Содержимое файла представляет собой случайную строку (я использую метку времени). Этот файл будет автоматически обновляться каждый раз, когда вы его упаковываете.
В проекте файл version.json запрашивается путем прослушивания событий кликов.Используйте локальный кеш для хранения последней сгенерированной строки и сравните ее со строкой, запрошенной на этот раз; если строки отличаются, это означает, что в проекте есть новое обновление контента, и пользователь может обновить или очистить кеш.

Метод 2: Сотрудничество между фронт- и бэк-эндами
Добавьте номер выпущенной версии в заголовок каждого запроса и сравните его с последним номером версии, сохраненным на клиенте. Если он несовместим, он будет принудительно обновлен, а текущий номер версии будет сохранен после обновления.
выполнить:
1. Webpack создает и генерирует файл json. Создайте папку плагинов в каталоге проекта и создайте новый файл 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. Каждый раз при выполнении команды сборки веб-пакета в каталоге dist создается файл version.json. В нем имеется поле с именем version, значение которого представляет собой временную метку во время сборки.


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