因为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()函数
