vue-cli3兼容ie浏览器的实现方法

我们再使用vue开发过程中,会大量使用es6的语法,但是ie浏览器对es6兼容性不好,如果我们需要兼容ie,那么就需要将es6转换成es5,经过自己查资料测试,总结出以下步骤


按以下步骤一一完成:

第一步.编辑package.json文件的browserslist属性

 "browserslist": [

        "> 1%", //市面上使用率多于1%的浏览器

        "last 3 versions",// 浏览器的最近3个版本

        "not ie <= 10" //ie10以上

  ]

第二步.如果引入的某些node依赖有es6,可以在vue.config.js中加入transpileDependencies属性

例如我的项目需要引入两个自己开发的node依赖(mine-ui1,mine-ui2),并且这两个依赖都使用了es6语法,那么可以这么解决

module.exports = {

    transpileDependencies: ["mine-ui1","mine-ui2"], //值是node依赖包的集合

}

第三步.修改babel.config.js

module.exports = {

    presets: [

      ['@vue/app', {

        useBuiltIns: 'entry',

      }]

    ]

  }

第四步.安装babel-polyfill

npm install --save-dev babel-polyfill


这几个步骤走完一遍,重新运行项目,然后在ie11打开试试,就发现可以正常打开了


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

推荐阅读更多精彩内容