vue cli记录一次因三方依赖插件未进行bable编译造成的ie不兼容问题_vue中第三方插件在ie浏览器报错-优快云博客

vue cli记录一次因三方依赖插件未进行bable编译造成的ie不兼容问题
因业务需求，vue项目中需要使用一个拖拽缩放插件vue-grid-layout 业务完成后客户需要兼容ie，

微软宣布将于美国当地时间6月15日（北京时间6月16日），停止对IE（ Internet Explorer）浏览器的所有支持和更新，为这款服务用户超过27年的浏览器画上句号。未来，将由微软推出的Edge浏览器接棒。

吐槽一下，解决兼容问题当天就是微软宣布停止使用ie的时候

打包好的项目在谷歌浏览器跑没问题，一到ie果然报错
在这里插入图片描述

根据js map地图看一下报错内容说的就是vue-grid-layout插件语法问题，说明我们项目打包的时候未编译vue-grid-layou，去依赖包中找这句代码改了不就完事，当时的我想的太简单，项目中根本没写这句代码，那就能断定是vue-grid-layou使用的依赖包有问题

果然在仔细看看source map地图，指出了这句代码是来自vue-grid-layou使用的依赖包@interactjs未进行bable编译，去vue-grid-layou中的node_modules看源码验证一波

在这里插入图片描述

问题确实如此，那就重新打包一下vue-grid-layou项目

确保vue-@vue/cli-plugin-babel版本问题不然容易打包报错
修改bable.config.js配置用最新预设项目防止意外报错
重新配置vue.config,js文件默认不会打包第三方库的内容我们指定需要打包的库

1
在这里插入图片描述
2

//bable.config.js
module.exports = {
  //old_________
    // presets: [
    //     '@vue/app',
    //     '@babel/preset-env'
    // ],
    //new_________
    presets: ["@vue/cli-plugin-babel/preset"],
    "plugins": [
        "transform-flow-comments"
    ]
}

3 参考https://cli.vuejs.org/zh/config/#transpiledependencies

//vue.config.js
module.exports = {
//这是指定要打包的三方库  参考https://cli.vuejs.org/zh/config/#transpiledependencies
  transpileDependencies: [
    // @interactjs/utils/raf.js
    /[/\\]node_modules[/\\]@interactjs[/\\]/,
  ]
  }