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"

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值