关于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'
第二个是,这里只兼容到了IE10element-ui表现良好,如果需要兼容到IE9也可以用这个办法,但是IE9没有Flex布局所以element-uiIE9下布局样式是完全崩溃的,解决办法是使用css3calc()函数

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容