Vue項(xiàng)目部署后提示刷新版本的實(shí)現(xiàn)代碼
vue項(xiàng)目部署新版本后,用戶如果不刷新頁(yè)面,可能會(huì)出現(xiàn)一些異常,需要刷新后才能正常使用,所以希望每次部署新版本后,提示用戶刷新瀏覽器。
之前看vue文檔,發(fā)現(xiàn)類(lèi)似的功能。
查了好些資料,網(wǎng)上說(shuō)的大部分也都是通過(guò)接口調(diào)用獲取版本號(hào)與本地版本號(hào)進(jìn)行對(duì)比,然而我只想用純前端的方式,那該怎么做呢,實(shí)在不行就只能查資料自己開(kāi)發(fā)個(gè) webpack 插件進(jìn)行處理了。
versionWebpackPlugin
主要代碼:
/*** * title: versionWebpackPlugin.js * Author: Gaby * Email: * Time: 2022-06-27 14:24 * LastEditTime: 2022-06-27 14:24 * LastEditors: Gaby * Description: */ const fs = require('fs'); const path = require('path'); const config = require('../package.json'); const readFile = filePath => fs.readFileSync(filePath, 'utf8'); const resolve = (...dir) => path.resolve(__dirname, '..', ...dir); const resolveApp = (...dir) => resolve('src', ...dir); const pluginName = 'versionWebpackPlugin'; const versionFileName = 'version.json'; class versionWebpackPlugin { apply(compiler) { // 1.自動(dòng)注入到 webpack.entry compiler.options.entry.app.import = [ ...compiler.options.entry.app.import, ...['./src/libs/version.js'] ]; // 2.將版本號(hào)寫(xiě)入到 main 文件中 compiler.hooks.beforeRun.tap(pluginName, () => { let content = readFile(resolve('build/', 'version.js')); let string = content.toString(); string = string.replace( '{{currentVersion}}', config.version + '_' + Date.now() ); string = string.replace( '{{VERSION_FILE_PATH}}', 'static/' + versionFileName ); fs.writeFile(resolve('src/libs/', 'version.js'), string, () => { // console.log('更新完成'); }); fs.writeFile( resolve('static/', versionFileName), '{\n' + ' "version": "' + config.version + '_' + Date.now() + '"\n' + '}', () => { // console.log('更新完成'); } ); }); } module.exports = versionWebpackPlugin;
項(xiàng)目中使用的是 vue-cli5
進(jìn)行創(chuàng)建的,配置文件要自行創(chuàng)建,要配置在 vue.config.js
中,以下兩種引入方式均可。
const path = require('path'); // const versionPlugin = require('./build/version-webpack-plugin'); module.exports = { // 公共路徑(必須有的) 默認(rèn)/ publicPath: './', // 輸出文件目錄 默認(rèn)dist outputDir: 'dist', // 靜態(tài)資源存放的文件夾(相對(duì)于outputDir) 默認(rèn)根目錄 assetsDir: 'static', // 生產(chǎn)環(huán)境SourceMap關(guān) productionSourceMap: false, // webpack 全局變量配置 configureWebpack: { // plugins: [new versionPlugin()] }, chainWebpack: config => { config .plugin('version-webpack-plugin') .use(require('./build/version-webpack-plugin'), [{}]); } };
這里先拋個(gè)大概思路,看看小伙伴們是否能自行完成,新部署項(xiàng)目后,右下角彈出提示有新版本更新,點(diǎn)擊更新。
總結(jié)
到此這篇關(guān)于Vue項(xiàng)目部署后提示刷新版本的文章就介紹到這了,更多相關(guān)Vue提示刷新版本內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
vue parseHTML函數(shù)源碼解析 AST預(yù)備知識(shí)
這篇文章主要為大家介紹了vue parseHTML函數(shù)源碼解析 AST預(yù)備知識(shí)示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-07-07幾個(gè)你不知道的技巧助你寫(xiě)出更優(yōu)雅的vue.js代碼
本文參考自油管上某個(gè)國(guó)外大神的公開(kāi)演講視頻,學(xué)習(xí)了一下覺(jué)得很不錯(cuò),所以在項(xiàng)目中也使用了這些不錯(cuò)的技巧。趁周末有空,寫(xiě)個(gè)博客記錄一下2018-06-06詳解Vue一個(gè)案例引發(fā)「內(nèi)容分發(fā)slot」的最全總結(jié)
這篇文章主要介紹了詳解Vue一個(gè)案例引發(fā)「內(nèi)容分發(fā)slot」的最全總結(jié),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12vue計(jì)算屬性無(wú)法監(jiān)聽(tīng)到數(shù)組內(nèi)部變化的解決方案
今天小編就為大家分享一篇vue計(jì)算屬性無(wú)法監(jiān)聽(tīng)到數(shù)組內(nèi)部變化的解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口
這篇文章主要介紹了vue-cli中vue本地實(shí)現(xiàn)跨域調(diào)試接口,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-01-01Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果
這篇文章主要為大家詳細(xì)介紹了Vue.js組件tabs實(shí)現(xiàn)選項(xiàng)卡切換效果的相關(guān)資料,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12

關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問(wèn)題解析

vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問(wèn)題及解決