欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Vue項(xiàng)目部署后提示刷新版本的實(shí)現(xiàn)代碼

 更新時(shí)間:2022年06月28日 09:56:08   作者:Gaby  
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目部署后提示刷新版本的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下

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)文章

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

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

    這篇文章主要介紹了關(guān)于vuex強(qiáng)刷數(shù)據(jù)丟失問(wèn)題解析,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2021-04-04
  • vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問(wèn)題及解決

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

    這篇文章主要介紹了vue項(xiàng)目打包之后接口出現(xiàn)錯(cuò)誤的問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • 最新評(píng)論