日本一区二区三区在线播放-国产视频一-美女黄网站成人免费视频-奇米中文字幕-日本少妇xxxxx-九九精品99-国产人碰人摸人爱视频-欧美亚洲网站-国产艳妇av在线-在线av网站-久久a久久-可以免费看黄色的网站-国产视频一二-在线播放视频高清在线观看-男人的天堂av网站-久久一二三区-欧美日韩综合一区二区

iview按需引入，ie11不兼容，報無效字符問題解決

2020-7-17 seo達(dá)人

準(zhǔn)備工作

//借助插件

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轉(zhuǎn)換問題

config.module

.rule("view-design") // 我目前用的是新版本的iview ,舊版本的iview，用iview代替view-design

.test(/view-design.src.*?js$/)

.use("babel")

.loader("babel-loader")

.end();

}

問題原因

為什么會有如上問題呢? 這個就和babel轉(zhuǎn)換問題有關(guān)了，按需引入時，那些組件里js文件未進(jìn)行babel轉(zhuǎn)換或轉(zhuǎn)換不徹底就被引入了，ie11對es6+的語法支持是很差的，所以以上方法就是讓引入文件前就對view-design的src下的所有js文件進(jìn)行babel轉(zhuǎn)換，舉一反三，當(dāng)按需引入第三方框架時出現(xiàn)這個問題，都可用這方法解決了，只要把規(guī)則和正則中view-design進(jìn)行替換。

延伸擴(kuò)展

//全局引入

import ViewUI from "view-design";

Vue.use(ViewUI);

import "view-design/dist/styles/iview.css";

tips:在全局引入時，一定要記住不要在.babelrc文件里配置按需導(dǎo)入，會導(dǎo)致沖突

藍(lán)藍(lán)設(shè)計( www.vcbhc.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計、 cs界面設(shè)計、 ipad界面設(shè)計、包裝設(shè)計、圖標(biāo)定制、用戶體驗(yàn) 、交互設(shè)計、網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)