国密 sm2，sm3，sm4加解密兼容ie问题
IE浏览器中会出现如下报错：
找问题找了许久终于终于找到了。原因是在sm2，sm3，sm4的加密算法中用到了一个叫jsbn这个依赖。然而这个依赖并没有被webpack转化并编译称ES5的语法，大家都到IE的兼容性不怎么好，特别是对新语法的支持程度一直都不好。所有必须针对IE进行处理，借鉴这位博主文章具体处理如下：
1、看sm2，sm3，sm4文件中的源码不难发现，每个文件中都有const {BigInteger} = require(‘jsbn’)这一段代码，那么我们需要手动安装jsbn，在命令行执行npm install --save jsbn。
2、从node_modules中找到sm-crypto包，并把src中所有内容copy到我们项目中，我这里把它放到了/src/shujudata/sm-crypto中，如下图：
3、在babel.config.js修改为：
module.exports = {
presets: [
['@vue/app', {
useBuiltIns: 'entry'
}]
],
}
4、下载core-js依赖用来转意ES6npm install --save core-js
5、main.js中引入import ‘core-js’
6、使用加密的地方引入
// const sm2 = require("sm-crypto").sm2;不在使用原有的sm2
import { sm2 } from '@/shujudata/sm-crypto'
至此SM2已经可以支持IE了，但是IE中还有两个属性不支持既dataset和requestAnimationFrame
现在兼容IE中的dataset和requestAnimationFrame
1、新建文件ie.js，将新建的ie.js放在/src/shujudata下，代码如下：
/* eslint-disable */
export default function compat_ie() {
/**
*作用：兼容dataset
*问题：[Vue warn]: Error in directive transfer-dom inserted hook: "TypeError: 无法获取未定义或 null 引用的属性“transfer”"
*说明：ie10及以下不支持dataset，以下代码处理兼容
* */
if (window.HTMLElement) {
if (Object.getOwnPropertyNames(HTMLElement.prototype).indexOf('dataset') === -1) {
Object.defineProperty(HTMLElement.prototype, 'dataset', {
get: function () {
var attributes = this.attributes; // 获取节点的所有属性
var name = [];
var value = []; // 定义两个数组保存属性名和属性值
var obj = {}; // 定义一个空对象
for (var i = 0; i < attributes.length; i++) { // 遍历节点的所有属性
if (attributes[i].nodeName.slice(0, 5) === 'data-') { // 如果属性名的前面5个字符符合"data-"
// 取出属性名的"data-"的后面的字符串放入name数组中
name.push(attributes[i].nodeName.slice(5));
// 取出对应的属性值放入value数组中
value.push(attributes[i].nodeValue);
}
}
for (var j = 0; j < name.length; j++) { // 遍历name和value数组
obj[name[j]] = value[j]; // 将属性名和属性值保存到obj中
}
return obj; // 返回对象
},
});
}
}
/**
*作用：兼容requestAnimationFrame（ie9）
*问题：
*说明：ie9是不支持requestAnimationFrame的，以下代码处理兼容
* */
(function () {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] ||
window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame) {
window.requestAnimationFrame = function (callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function () { callback(currTime + timeToCall); },
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
}
if (!window.cancelAnimationFrame) {
window.cancelAnimationFrame = function (id) {
clearTimeout(id);
};
}
}());
/**
*作用：兼容classList（ie9）
*错误信息： 无法获取未定义或 null 引用的属性“add”/ 无法获取未定义或 null 引用的属性“remove”
*说明：ie9以下代码处理兼容
* */
if (!('classList' in document.documentElement)) {
Object.defineProperty(HTMLElement.prototype, 'classList', {
get: function () {
var self = this;
function update(fn) {
return function (value) {
var classes = self.className.split(/s+/g);
var index = classes.indexOf(value);
fn(classes, index, value);
self.className = classes.join(' ');
};
}
return {
add: update(function (classes, index, value) {
if (!~index) classes.push(value);
}),
remove: update(function (classes, index) {
if (~index) classes.splice(index, 1);
}),
toggle: update(function (classes, index, value) {
if (~index) { classes.splice(index, 1); } else { classes.push(value); }
}),
contains: function (value) {
return !!~self.className.split(/s+/g).indexOf(value);
},
item: function (i) {
return self.className.split(/s+/g)[i] || null;
},
};
},
});
}
}
2、在main.js中新增
// 这个方法里包含了一些对IE的特殊处理, 具体代码见下面
import compat_ie from 'ie.js的文件'
compat_ie()
到这里项目就可以兼容到IE9（含IE9）以上的浏览器了