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

2020-7-17 seo达人

准备工作

//借助插件

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

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计、 cs界面设计、 ipad界面设计、包装设计、图标定制、用户体验、交互设计、网站建设、平面设计服务