IE白屏修复，vue 兼容IE

白屏报错：SCRIPT5022: SecurityError

主要原因应该是代码中有es6语法，IE解析错误，如果代码中没有就排查是不是引入的第三方插件中含有es6 语法；

排查方法：

        1. 回忆最近导入的包 ，先注释掉看看是不是该文件引起的

         2. main.js 将引入的包一个一个注释排出看看是哪个文件导致的；

        3. 引入  babel-polyfill，转化es6 语法，可以配置转化node-module 引入的包；

        4. 找到引起白屏原因，如果是第三包引起的先试试第三方提供的包有没有兼容IE 的，如果有的话使用兼容IE 的包；如果没有尝试使用 babel-polyfill 进行转换；

本 vue 项目，vue 版本 2.6.12

 

尝试修复方式：引入 babel-polyfill，转化es6 语法

 package.json 文件
 
 dependencies {
     "babel-runtime": "^6.26.0"
     "vue": "^2.6.12",
 }
 devDependencies {
     "@babel/plugin-transform-runtime": "^7.5.5",
     "@babel/preset-env": "^7.5.5",
     "babel-polyfill": "^6.26.0",
 }

vue.config.js 文件

chainWebpack: function(config) {
    // 解决IE白屏问题
    config.entry('main').add('babel-polyfill');
    config.entry.app = ['babel-polyfill', './src/main.js'];
}

babel.config.js 文件

module.exports = {
    presets: [
        '@vue/app',
        ["@babel/preset-env", {
            "targets": {
                "edge": "17",
                "firefox": "60",
                "chrome": "39",
                "safari": "11.1",
                "ie": "11"
            },
            "useBuiltIns": "usage"
         }]
    ],
    plugins: ["@babel/plugin-transform-runtime"],
    comments: false,
    env: {
        test: {
            presets: ["@babel/preset-env"],
            plugins: ["istanbul"]
        }
    }
};

注意事项：版本冲突的问题！

引起 白屏的原因其实是因为引入了华为云的SDK : esdk-obs-browserjs，中含有es6的语法，node-module 

解决方案：引入 转化后的 华为云的SDK : "esdk-obs-browserjs-without-polyfill.3.22.3.min.js"，不含ES6 语法；

main.js

import "./assets/js/esdk-obs-browserjs-without-polyfill.3.22.3.min.js"