美文网首页
vue-cli创建项目到引用iview导致的ie11不兼容问题解

vue-cli创建项目到引用iview导致的ie11不兼容问题解

作者: 迦叶凡 | 来源:发表于2019-02-01 11:15 被阅读0次

    前言

    在实际工作过程中,用到了Vue和iView。但是遇到了在ie11中不兼容的问题,经过网上多方的查询,终于收集了一套完整的解决方案,下面将它分享出来。

    正文

    解决ie不支持es6语法问题

    在使用vue-cli搭建Vue的当页面项目时,会自动帮你安装包babel相关的组件。babel的作用是将ES6+的语法转换为ES5的语法,这样就能保证被浏览器兼容(没错,说的就是IE11)。
    但是这还远远不够,因为在你实际写代码的时候,除了会用到ES6+的相关语法之外(比如let,const),还会用到一些ES6+新出的API(比如Promise,()=>{}箭头函数),而这些单单靠babel是无法解决的。这个时候就需要使用babel-polyfill来解决这些问题。

    • 安装babel-polyfill
    npm install babel-polyfill --save
    
    • 在webpack.config.js中引入
    entry: {
      app: ["babel-polyfill", "./src/main.js"]
    },
    

    解决iView引入时的问题

    注:这里是按需引用遇到的问题,全部引用目前没有这个问题

    • 先根据官网要求的进行安装配置
    npm install babel-plugin-import --save-dev
    
    // .babelrc
    {
      "plugins": [["import", {
        "libraryName": "iview",
        "libraryDirectory": "src/components"
      }]]
    }
    
    • 然后修改webpack.base.config.js配置文件
    //这里的意思是遇到路径为文件名为iview.src.xxxxjs的都用babel转换为ES5的支持的语法
    {
      test: /iview.src.*?js$/,
      loader: 'babel-loader'
    }
    

    其他1

    在实际项目中也用到过iview-admin这个第三方开源的后台管理系统,也遇到了ie11兼容的问题。下面是解决方法:
    首先还是向上面一样安装babel-polyfill,然而发现还是在一直报错。后来不断排查发现是webpack-dev-server版本的问题。经过测试,发现就webpack-dev-server@2.10.1的版本不行,其他版本好像都可以(我试了2.7.1和2.11.3)。
    如果你也遇到这样类似的问题,换个webpack-dev-server版本试试。

    npm install --save-dev webpack-dev-server@2.11.3
    

    其他2

    那么想要在单个HTML(非vue-cli生成的项目)中如何实现支持ES6+语法?简单,只要添加如下代码即可:

    <script src=’./brower.min.js’>
    <script type=”text/babel”>
      //包含ES6+语法的逻辑代码
    </script>
    

    相关文章

      网友评论

          本文标题:vue-cli创建项目到引用iview导致的ie11不兼容问题解

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