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文件裏配置按需導入，會致使衝突