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瀏覽器打開(kāi)正常，以上操作猛如虎，IE瀏覽器打開(kāi)250，好了不廢話，下面是解決方案
解決方案
//vue.config.js中配置
chainWebpack: config => {
//解決iview 按需引入babel轉(zhuǎn)換問(wèn)題
config.module
.rule("view-design") // 我目前用的是新版本的iview ,舊版本的iview，用iview代替view-design
.test(/view-design.src.*?js$/)
.use("babel")
.loader("babel-loader")
.end();
}
問(wèn)題原因
為什么會(huì)有如上問(wèn)題呢? 這個(gè)就和babel轉(zhuǎn)換問(wèn)題有關(guān)了，按需引入時(shí)，那些組件里js文件未進(jìn)行babel轉(zhuǎn)換或轉(zhuǎn)換不徹底就被引入了，ie11對(duì)es6+的語(yǔ)法支持是很差的，所以以上方法就是讓引入文件前就對(duì)view-design的src下的所有js文件進(jìn)行babel轉(zhuǎn)換，舉一反三，當(dāng)按需引入第三方框架時(shí)出現(xiàn)這個(gè)問(wèn)題，都可用這方法解決了，只要把規(guī)則和正則中view-design進(jìn)行替換。
延伸擴(kuò)展
//全局引入
import ViewUI from "view-design";
Vue.use(ViewUI);
import "view-design/dist/styles/iview.css";
tips:在全局引入時(shí)，一定要記住不要在.babelrc文件里配置按需導(dǎo)入，會(huì)導(dǎo)致沖突
藍(lán)藍(lán)設(shè)計(jì)( www.z1277.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://www.z1277.cn