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

yaoxfly 原创文章 8获赞 112访问量 1万+ 关注 私信 展开阅读全文
作者：yaoxfly

兼容 IE11 字符