iview按需引入,ie11不兼容,报无效字符问题解决

7 篇文章 1 订阅
7 篇文章 0 订阅

准备工作

//借助插件
npm install babel-plugin-import --save-dev

// .babelrc
{
  "plugins": [["import", {
    "libraryName": "view-design",
    "libraryDirectory": "src/components"
  }]]
}
在main.js中引入
import "view-design/dist/styles/iview.css";
import { Button, Table } from "view-design";
const viewDesign = {
 Button: Button,
 Table: Table
};
Object.keys(viewDesign).forEach(element => {
 Vue.component(element, viewDesign[element]);
});

先用google浏览器打开正常,以上操作猛如虎,IE浏览器打开250,好了不废话,下面是解决方案

解决方案

 //vue.config.js中配置
 chainWebpack: config => {
    //解决iview 按需引入babel转换问题
   config.module
      .rule("view-design")  //  我目前用的是新版本的iview ,旧版本的iview,用iview代替view-design
      .test(/view-design.src.*?js$/)
      .use("babel")
      .loader("babel-loader")
      .end();
 }

问题原因

为什么会有如上问题呢? 这个就和babel转换问题有关了,按需引入时,那些组件里js文件未进行babel转换或转换不彻底就被引入了,ie11对es6+的语法支持是很差的,所以以上方法就是让引入文件前就对view-design的src下的所有js文件进行babel转换,举一反三,当按需引入第三方框架时出现这个问题,都可用这方法解决了,只要把规则和正则中view-design进行替换。

延伸扩展

 //全局引入
 import ViewUI from "view-design";
 Vue.use(ViewUI);
 import "view-design/dist/styles/iview.css";

tips:在全局引入时,一定要记住不要在.babelrc文件里配置按需导入,会导致冲突

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

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值