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

准备工做

//借助插件
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文件里配置按需导入，会致使冲突