因为Vue使用了 ES6 语法,而低版本 IE 浏览器不支持,解决方法是:
使用babel-polyfill
转换成 ES5,具体办法
安装@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 入口中都需要引入
第二个是,这里只兼容到了 IE10,
import '@babel/polyfill';
第二个是,这里只兼容到了 IE10,
element-ui
表现良好,如果需要兼容到 IE9 也可以用这个办法,但是 IE9 没有 Flex 布局所以element-ui
在 IE9 下布局样式是完全崩溃的,解决办法是使用 css3 的calc()
函数