您好,欢迎访问代理记账网站
移动应用 微信公众号 联系我们

咨询热线 -

电话 15988168888

联系客服
  • 价格透明
  • 信息保密
  • 进度掌控
  • 售后无忧

Vue项目在ie浏览器下空白(es6语法兼容问题)ansi-styles报错

大家好,我是小梅,公众号:「小梅的前端之路」 原创作者。

作为在前端领域不断探索的一员,在此记录开发中遇到的问题,如果你也遇到了相同的问题,希望本文对你有帮助。


背景:启动Vue项目,谷歌浏览器可以正常显示,但是IE浏览器空白,且有报错。

通过控制台,定位到错误发生在app.js文件的低1883行,此处有es6的语法。然而IE不支持es6语法,因此才会报错、页面空白。

问题分析:打开node_modules文件夹,定位到ansi-styles的index.js文件,我们发现,代码采用的是es6语法,需要使用Babel转译为向后兼容的JS代码

解决办法:在vue.config.js文件中增加transpileDependencies配置。重新启动,IE浏览器就能正常显示了

transpileDependencies: ['ansi-styles']

问题产生的原因:babel-loader不会转译node_modules中的文件。Vue-Cli为我们提供了配置用来转译第三方依赖的配置,参考地址:配置参考 | Vue CLI


❤️欢迎素质三连[点赞 + 收藏 + 评论]

我是小梅,有兴趣的话可以在微信搜一搜「小梅的前端之路」第一时间接收文章更新通知,一起沟通、学习成长呀。


分享:

低价透明

统一报价,无隐形消费

金牌服务

一对一专属顾问7*24小时金牌服务

信息保密

个人信息安全有保障

售后无忧

服务出问题客服经理全程跟进