阅读 253
IE兼容打开白屏报错问题记录

IE兼容打开白屏报错问题记录

1.项目环境

 vue + vue-admin-template 
复制代码

2.出问题点

 由于项目被甲方排查出漏洞,需要对敏感数据进行加密解密处理,故引入了 crypto-js
 开发一直chrome  无问题 就测试上线了,没过2天被幺蛾子的 IE 报出了问题,直接界面白屏,完全打不开项目,排查问题,找到解决方案后才有了今天的这篇文章。
 1) IE 报错 “  缺少‘)’ ”  第一反应肯定是ES6语法问题
 2) 查看项目  构架项目的第一人 main.js 中已有引入 babel-polyfill 为毛不起作用????(不清楚这种方式是否靠谱,有人说可以这么玩,有的说这样没用,我不管,反正谁能解决我的问题谁就有用,我默认它没用)
 3) 查看报错 )  发现果然是  crypto-js 里面的类似 fn(StrBase64 = false)这种ES6 形参赋默认值报错
复制代码

3.解决问题 (能有什么方法呢?我这种低等级码农宝宝也只能找度娘了)

首先一看 都是些 webpack里配置babel-polyfill 的 我看看我的项目,vue 3.0 没有webpack.conf.js 懵逼一下子(好像有什么方法可以调出,我也没敢瞎搞)继续度娘上摸索,看到一个 抓过去试试,

1).肯定是安装啦

 npm install --save babel-polyfill

复制代码

2)用起来

这边是 vue.config.js 里配置

/// 听说这个是关键  很重要很重要的 咱也不懂 咱也不敢问
transpileDependencies: ['element-ui'],
chainWebpack:config => {
    config.entry('main').add('babel-polyfill')
{
复制代码
3)测一下试试(依然白屏,当时我毛都竖起来了,不知道如何是好,算了,喝口水 上个厕所去,就在我蹲厕所的那一刻,我突然想起了度娘里的一句话,指定某个文件,是不是我不该照搬度娘 应该把 element-ui 改为 crypto-js, 有可能,擦屁股起身,回去再试试,修改成下面介个样汁儿)
    transpileDependencies: ['crypto-js'],
复制代码
4) 重启服务 哇塞, 成功啦!!!!成功啦!!!!(原谅傻宝宝的乐趣就是这么低级)
5) 记录傻宝宝成功日记吧!!! (此文诞生)

终极方案)问题又来了, 傻宝宝高兴的太早了,本地测试一切OK。几天后提测,代码推Test分支 使用jenkins发布,测试环境测试,CryptoJs 找不到报错,傻宝想割腕。 竟然还有幺蛾子。

发现大问题 文章都发布好久了,给点面子好不好?

终极方案:

1》 检查发现, crypto-js ^4.0.0 有毒 对IE 兼容不友好 (估计是使用了什么 最新语法造成的) ,既然这样,就版本降级, 这里直接找了个 "crypto-js": "3.2.1" 版本,降级后发现 transpileDependencies 属性都不需要了 IE就能正常,神奇,这令人迷惑的代码,哎。。。。。。。。。。能不能让我安乐死?
 // transpileDependencies: ['crypto-js'], // vue.config.js 文件 这段不要了
 "crypto-js": "3.2.1",  // package.json 文件 

复制代码

结语:(原创不易,给傻宝宝一丝鼓励!!!动动手给个赞)

文章分类
前端
文章标签