相关文章推荐
大力的西瓜  ·  SOME | ANY ...·  1 年前    · 
专栏 / 【D1n910】nuxt项目兼容低版本ie

【D1n910】nuxt项目兼容低版本ie

2020年03月20日 20:51 --阅读 · --喜欢 · 爱交作业的D1N910
粉丝: 1599 文章: 149

正常操作,正常分析,大家好,我是D1n910

Nuxt其实是很爽的开箱即用的SSR方案。


它本身就已经继承了大量的轮子。


Nuxt本身默认兼容到ie9。


做的项目发现却不能够在ie9上跑,甚至不能在ie10上跑。


总结有以下几种情况和对应方式(感觉不仅仅是nuxt,其他的也可以这么做)

一、第三方包代码不兼容ie9

用nuxt自带的babel进行转换。babel转换默认不会转换第三方node_modules/下的内容。


通过 开发者工具的报错 抓到对应的第三方包名称。


通过配置文件nuxt.config.js下的build属性的transpile,可以针对需要解析的第三方包进行转换。

nuxt.config.js默认转换element-ui的代码


比如这里的ismobile.js的const就没做转换,可以添加上去后进行转换。

ismobilejs



二、使用了未定义的javascript对象

比如使用了Map对象,IE10及其以下版本不支持Javascript Map对象,会提示“Map”未定义。


那么可以引入对应的core-js包进行转换。


新建一个文件夹 /plugins/core.js


这里引入对应的转换包

通过配置文件nuxt.config.js下的plugins属性,添加刚刚的core(放到第一位)

然后就可以转换成功了


三、使用了高级js原型链prototype的方法

比如我在根文件html使用了includes方法,那么就会报送includes错误。通过改为低版本的的方法实现,比如我改为indexOf判断。


以上的内容就差不多了。


四、使用了不兼容的第三方js

如果你引用了第三方js的cdn然后报错,比如我这边用了iconfont的js的cdn,需要下载后作为本地js文件然后转换处理。


核心内容还是用的babel,做了以上内容,基本上可以兼容到ie9.


什么?兼容到ie6?你再说一遍?喂喂喂,我在服务器……哎呀,风大听不见啊喂……先这样,挂了。bye

-- END --

投诉或建议
35岁、56岁、74岁 大龄考生的大学梦
大象新闻记者 彭丹6月7日,2023年高考开启。全国1291万考生带着寒窗十余载苦读所学奔赴考场,全力以赴,迎接人生中这场重要战役。对于大部分人来说,高考是人生的重要考验,是实现梦想的大门,或者一次改变命运的机会。三位“另类”考生,三段人生轨迹,三个关于理想的故事,讲述着他们的大学梦,诠释着属于他们坚持的意义。35岁 困在高三 是梦想还是执念对于很多人来说,高考阶段是一个煎熬的过程,而35岁的唐尚珺把这份“煎熬”延续了14年。唐尚珺出生在一个广西普通的农村家庭,生长在大山里,要想改变命运只能读书,唐尚珺深
“殷墟王都,弥散凄寥” 绝境之下的花城公主:大元素使[水之章 序幕]
大元素使——水之章序幕 “深林花都,弥散寥寥” 当老奶妈望见城市远处弥漫的硝烟,她才终于意识到,罩在公主殿下身上的那层保护膜已经消失了。“原来,真的要打仗啊。”公主将发髻取下,让长长的柔顺银发披散而下,手放在钢琴上,端庄地凝望窗外的绯云。“公…公主殿下,我…我想…我想是的。”老奶妈用颤抖的手将手里的莲子燕窝羹端到钢琴旁的小餐桌上。一想到这几天公国内发生的这些事,她就吓得浑身发抖,战火如野火,将花园之都茵殿点燃,敌军里三层外三层地包围了首都,为了阻断驰援首都的皇家卫队,他们放火点燃了茵殿附近的生态保护区,连