webpack + vue 项目，版本更新问题

问题：前端脚本重新编译后，静态资源由于浏览器缓存而无法重新加载，出现 'Loading chunk " + xx + " failed'情况。

解决方法：
step1 : 在index.js中引入版本变量

  // 生产模式
module.exports = {
  build: {
      ...
   //引入版本变量
    env: {
      VERSION: new Date().getTime() + ''
    }
  }

step2 : 引入 diy-plugin.js 自定义插件脚本，生成版本信息

'use strict';

var FStream = require('fs');
var Archiver = require('archiver'); //npm install archiver

/**
 * 版本信息生成插件
 * @param options
 * @constructor
 */
function DiyPlugin(options) {
    this.options = options || {};
    this.options.outZipFile = this.options.path + '/front.zip';

    !this.options.versionDirectory && (this.options.versionDirectory = 'static');
}

//apply方法是必须要有的，因为当我们使用一个插件时（new somePlugins({})），webpack会去寻找插件的apply方法并执行
DiyPlugin.prototype.apply = function (compiler) {
    var self = this;

    compiler.plugin("compile", function (params) {
        var dir_path = this.options.context + '/' + self.options.versionDirectory;
        var version_file = dir_path + '/version.json';
        var content = '{"version":' + self.options.env.VERSION + '}';

        FStream.exists(dir_path, function (exist) {
            if (exist) {
                writeVersion(self, version_file, content);
                return;
            }

            FStream.mkdir(dir_path, function (err) {
                if (err) throw err;
                console.log('\n创建目录[' + dir_path + ']成功');

                writeVersion(self, version_file, content);
            });
        });
    });

    //编译器'对'所有任务已经完成'这个事件的监听
    // compiler.plugin("done", function (stats) {
    //     console.log("开始打包压缩编译文件...");

    //     var output = FStream.createWriteStream(self.options.outZipFile);
    //     var archiveZip = Archiver('zip', {zlib: {level: 9}});

    //     archiveZip.on('error', function (err) {
    //         throw err;
    //     });

    //     archiveZip.pipe(output);
    //     archiveZip.directory(self.options.path + '/' + self.options.versionDirectory, self.options.versionDirectory);
    //     archiveZip.file(self.options.path + '/index.html', {name: 'index.html'});
    //     //archive.glob(self.options.path + '/*.*');
    //     archiveZip.finalize();
    // });
};

const writeVersion = (self, versionFile, content) => {
    console.log("\n当前版本号：" + self.options.env.VERSION);
    console.log("开始写入版本信息...");

    //写入文件
    FStream.writeFile(versionFile, content, function (err) {
        if (err) throw err;
        console.log("版本信息写入成功!");
    });

    //删除之前的压缩包
    // FStream.exists(self.options.outZipFile, function (exists) {
    //     if (exists) {
    //         FStream.unlinkSync(self.options.outZipFile);
    //     }
    // });
}

module.exports = DiyPlugin;

step3: 在webpack配置文件中添加 diy-plugin.js 编译钩子

const diyPlugin = require('./diy-plugin.js');
var env = config.local.env;
    ...
 plugins: [
    ...
  new diyPlugin({path: config.output.path, env: env, versionDirectory: 'dist'}),
  new webpack.DefinePlugin({
    'process.env': env
  })
]

webpack + vue 项目， 版本更新问题

推荐阅读更多精彩内容

webpack + vue 项目，版本更新问题