前言：

????解決方案的版本號生成參考了網(wǎng)上的文章碌廓，因?yàn)闀r間很久了具體是那篇我也忘記了就不上原文鏈接了传轰，寫這篇文章是為了做一個記錄方便日后查看剩盒。

問題描述：

????vue3 打包會將js和css打包成帶隨機(jī)數(shù)的文件名，項(xiàng)目部署后慨蛙，用戶在瀏覽過程中辽聊，再次對項(xiàng)目進(jìn)行了打包發(fā)布后，瀏覽器沒有緩存的頁面報(bào)錯提示找不到j(luò)s,需要用戶手動刷新才能正確加載頁面期贫。

報(bào)錯頁面截圖

解決方案：

? ? 每次發(fā)布的時候記錄一個版本號跟匆，在跳轉(zhuǎn)路由的時候進(jìn)行版本判斷，如果發(fā)現(xiàn)兩次版本不一致提示版本更新或者是自動刷新一次瀏覽器通砍。我項(xiàng)目中是采用的自動刷新瀏覽器玛臂。

? ??我項(xiàng)目使用的是vue3烤蜕、element-plus、typesScript4迹冤、vite3的后臺集成方案（vue-element-plus-admin）

? ? 第一步：生成版本號

? ? ? ? ? ? 1.在項(xiàng)目中新建一個build文件夾讽营，新增build-pro.js 和 build-test.js兩個生成版本號的js文件(build-pro.js:是正式發(fā)布版本，build-test.js：是測試版本)泡徙，兩個js基本是一樣的就生成的文件夾名稱不同：? const OUTPUT_DIR = 'dist-pro'橱鹏，build-test.js中將dis-pro換成dist-test即可。根據(jù)項(xiàng)目需求調(diào)整堪藐，如果項(xiàng)目都打包到dist文件中莉兰，新建一個版本號js文件即可。

build-test.js

console.log('build > 文件開始執(zhí)行礁竞！')

const fs = require('fs')

const path = require('path')

function getRootPath(...dir) {

? return path.resolve(process.cwd(), ...dir)

}

const runBuild = async () => {

? try {

? ? const OUTPUT_DIR = 'dist-pro'

? ? const VERSION = 'version.json'

? ? const versionJson = {

? ? ? version: 'V_' + Math.floor(Math.random() * 10000) + Date.now()

? ? }

? ? fs.writeFileSync(getRootPath(`${OUTPUT_DIR}/${VERSION}`), JSON.stringify(versionJson))

? ? console.log(`version file is build successfully!`)

? } catch (error) {

? ? console.error('version build error:\n' + error)

? ? process.exit(1)

? }

}

runBuild()

console.log('build > 文件執(zhí)行結(jié)束糖荒！')

第二步：在package.json中配置生成版本號的命令

package.json

每次打包后會成一個version.json文件

version.json

第三步：修改.env.pro和.env.test文件，新增語句來控制是否強(qiáng)制刷新模捂。這一步不需要的話可以省略

? ??VITE_REFRESH=true

是否強(qiáng)制刷新

第四步：在permission.ts中將版本號寫入到sessionStorage中寂嘉，每次跳轉(zhuǎn)路由的時候?qū)Ρ劝姹咎枺姹咎柌灰恢轮苯铀⑿聻g覽器枫绅。

permission.ts

const checkVersion = async () => {

? const url = `/version.json?t=${Date.now()}`

? let res = null

? try {

? ? res = await axios.get(url)

? } catch (err) {

? ? console.error('checkVersion error: ', err)

? }

? let version = null

? if (res) {

? ? version = res.data.version

? }

? const localVersion = wsCache.get('sq_version')

? if (version && localVersion !== version) {

? ? wsCache.set('sq_version', version)

? ? window.location.reload()

? }

? ?wsCache.set('sq_version', version)

}