问题

单页应用在部署到服务器后由于manifest文件的更新，路由Hash值发生变化，导致路由点击报错从而无法跳转。

解决

既然每次部署一定会打包，那么在打包时由webpack创建版本号文件，在系统登录时获取，再比对当前版本看是否需要更新。
打包后会在打包目录下生成配置JSON，之后发请求即可。

代码

build下创建文件version-plugin.js

'use strict';

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

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

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

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

  compiler.plugin("compile", function (params) {
    // 因为以前应用了条件编译，所以此处打包路径做修改
    // var dir_path = this.options.context + '/' + self.options.versionDirectory;
    var dir_path = self.options.versionDirectory;
    var version_file = dir_path + '/version.json';
    // 根据自己项目要求创建res文件
    // var content = '{"version":' + self.options.env.VERSION + '}';
    var content = `{"errcode": 0, "errinfo": "", "data": { "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);
      });
    });
  });
};

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

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

module.exports = VersionPlugin;

webpack配置文件

const VersionPlugin = require('./version-plugin.js')

plugins: [
  // 添加
  new VersionPlugin({path: config.build.assetsRoot, env: env, versionDirectory: config.build.assetsRoot}),
]

条件编译配置

VERSION: `"${new Date().getTime()}"`

之后每次打开页面就发送请求，version.json，查看新版本的版本号即可。