vue兼容IE问题

问题1. babel-polyfill

问题背景

IE11 不支持promise

解决方法

需要将promise转换为浏览器可识别的ES5语法

// 1.安装babel-polyfill
npm install --save-dev babel-polyfill
// 2.在main.js中引入babel-polyfill
import 'babel-polyfill' 
// 3.或者修改build/webpack.base.conf.js文件
//将
entry: {
  app: './src/main.js'
},
//替换为
entry: {
 app: ['babel-polyfill', './src/main.js']
},

问题2. js-base64

问题背景

在引入js-base64进行base64加密时，IE浏览器会报错js-base64有语法问题

解决方法

• 卸载当前版本的js-base64，安装@2.*版本的

npm uninstall js-base64
npm install js-base64@2.6.2 --save
npm uninstall js-base64

• 使用 window.btoa() 加密,window.atob()解密（兼容IE10以上和其他浏览器）

var str = "RUNOOB";
var enc = window.btoa(str);
var dec = window.atob(enc);
var res = "编码字符串为: " + enc + "<br>" + "解码后字符串为: " + dec;

问题3. webpack-dev-server版本问题

问题背景

"webpack-dev-server": "^2.11.5",版本IE10以下无法打开,提示报错 ：SCRIPT1002: 语法错误

image.png

查看console发现webpack打包后的脚本报错:

/* WEBPACK VAR INJECTION */(function(__resourceQuery) {
/* global __resourceQuery WorkerGlobalScope self */
/* eslint prefer-destructuring: off */
const url = __webpack_require__(61);
const stripAnsi = __webpack_require__(67);
const log = __webpack_require__(69).getLogger('webpack-dev-server');
const socket = __webpack_require__(70);
const overlay = __webpack_require__(102);

显然，IE10并不支持ES6的const语法，所以当版本升级到2.8.1之后，是无法在IE10下面进行使用和开发的。
来看看2.7.1版本打包之后，这一块的脚本是怎样的

/* WEBPACK VAR INJECTION */(function(__resourceQuery) {/* global __resourceQuery WorkerGlobalScope */
var url = __webpack_require__(61);
var stripAnsi = __webpack_require__(67);
var log = __webpack_require__(69)
var socket = __webpack_require__(70);
var overlay = __webpack_require__(102);

解决方法

• 2.7.1打包之后还是使用的var去声明变量。所以想要在IE10上使用webpack-dev-server的相关功能，还是将版本先固定在2.7.1。

问题4. IE浏览器滚动条隐藏隐藏

::-webkit-scrollbar-track { background-color: rgba(0,0,0,0.2);  }
::-webkit-scrollbar {  width: 0px;height:8px;  background-color: #F5F5F5;border-radius: 5px;  }
::-webkit-scrollbar-thumb { /* */background: #0C4EA2;border-radius: 5px; }
::-webkit-scrollbar-corner{ background-color: #F5F5F5;}
ie隐藏滚动条样式代码：
html {
       /*隐藏滚动条，当IE下溢出，仍然可以滚动*/
      -ms-overflow-style:none;
      /*火狐下隐藏滚动条*/
      overflow:-moz-scrollbars-none;
  }
  /*Chrome下隐藏滚动条，溢出可以透明滚动*/
  html::-webkit-scrollbar{width:0px}

• 火狐不允许自定义滚动条样式,可以用两个div遮盖来隐藏，还可以用插件来解决。