关于Vue兼容IE10

作者: toyfish | 来源:发表于2019-04-30 14:09 被阅读22次

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

    相关文章

      网友评论

        本文标题:关于Vue兼容IE10

        本文链接:https://www.haomeiwen.com/subject/nxtvnqtx.html