vue/cli2和cli3框架下bable解决es6语法不兼容问题,适用于ie11,ie10的项目兼容。

cli2框架支持ie的修改方案

我们引用一些第三方插件的时候,经常会出现node_modules中的es6语法没有被转换导致报错,而且这样的报错往往比较奇怪,无法直观的根据报错信息查看原因。
例如缺少“;”,“无法识别”,等乱起八糟的报错。
此时一般是通过babel来解决。

对于vue/cli2脚手架搭建的项目来说,babel其实已经引入了,.babelrc文件也已经创建好了。
但是实际操作的过程中,我们还是需要进行一些配置。

配置文件位置是 build/webpack.base.conf.js

然后找到module——rules
找到babel-loader,在include这一项中
照葫芦画瓢,增加你需要引入的第三方插件的位置

例如:

  {
    test: /\.js$/,
    loader: "babel-loader",
    include: [
      resolve("src"),
      resolve("test"),
      resolve("node_modules/webpack-dev-server/client"),
      resolve('node_modules/element-ui/src'),
      resolve('node_modules/vue-easytable/libs'),
    ]
  },

重新启动项目,这样就可以运行了 。

cli3框架支持ie的修改方案

node_modules里的依赖默认是不会编译的,会导致es6语法在ie中的语法报错,所以需要在vue.config.js中使用transpileDependencies属性配置node_modules中指定哪些文件夹或文件需要编译.

 transpileDependencies: [
        /[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]src/,
        /[/\\]node_modules[/\\](.+?)?element-ui(.*)[/\\]package/,
        /[/\\]node_modules[/\\](.+?)?f-render(.*)/,
        /[/\\]node_modules[/\\](.+?)?quill-image-drop-module(.*)/,
        /[/\\]node_modules[/\\](.+?)?vue-ele-form(.*)/,
        /[/\\]node_modules[/\\](.+?)?vue-ele-form-bmap(.*)/,
        /[/\\]node_modules[/\\](.+?)?vue-baidu-map(.*)/,
        /[/\\]node_modules[/\\](.+?)?vue-ele-upload-image(.*)/,
    ],

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值