• 2022-09-04被罚款200元记6分.
  • 特么的.电脑风扇坏了.快递还全部停发.太难了...求求了.疫情赶紧走吧.
  • 难啊难!要钱难!
  • 更新到WordPress5.6啦
  • 有点伤心了,今年净遇到王某海这种人.
  • 难啊难...
  • 七牛的JS SDK 的文档真坑啊.
  • 蓝奏云分享部分地区无法访问需手动修改www.lanzous.com变为:www.lanzoux.com
  • 好气啊~原来使用的CDN服务商莫名其妙的给我服务取消了~
  • 遇见一个沙雕汽车人.

关于Vue兼容IE10的方法

杂谈 KIENG 4年前 (2019-08-30) 189243次浏览 已收录 3个吐槽 扫描二维码

关于 Vue 兼容 IE10 的方法

因为Vue使用了 ES6 语法,而低版本 IE 浏览器不支持,解决方法是:
使用babel-polyfill转换成 ES5,具体办法

这个方法只能支持到 IE9 为止的语法兼容,关于样式的兼容需要另行处理

安装@babel/polyfill

 $ npm install --save-dev babel/polyfill

packgae.json中找到browserslist添加

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "ie 8"
  ]

babel.config.js中添加

 module.exports = {
    presets: [
      ['@vue/app', {
        useBuiltIns: 'entry'
    }]
    ]
  }

main.js中引入

import '@babel/polyfill'

然后重启项目,应该就可以正常显示了。

这里有两个问题:一个是如果配置了多页面的话,那么在多页面的 js 入口中都需要引入import '@babel/polyfill';
第二个是,这里只兼容到了 IE10,element-ui表现良好,如果需要兼容到 IE9 也可以用这个办法,但是 IE9 没有 Flex 布局所以element-ui在 IE9 下布局样式是完全崩溃的,解决办法是使用 css3 的calc()函数


KIENG.CN , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权
转载请注明出处:关于 Vue 兼容 IE10 的方法
本文章链接:https://blog.kieng.cn/1421.html
喜欢 (42)
KIENG
关于作者:
一个热衷网络的Man
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 快速获取昵称
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(3)个小伙伴在吐槽
  1. 没解决 报语法错误
    五月 | 中国江苏苏州市 电信2020-03-02 17:29 回复 Windows 10 | Chrome 79.0.3945.88
    • KIENG
      ... 我当时写的时候没问题..
      KIENG2020-03-03 15:38 回复 Windows 10 | Chrome 70.0.3538.25
  2. 我这边也提示语法错误 楼上的老哥解决了吗
    神秘人586 | 中国山东青岛市 电信2020-12-31 13:18 回复 Windows 10 | Chrome 87.0.4280.88