关于Vue兼容IE10
2019-04-30 本文已影响22人
toyfish
因为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()
函数