籌備工作

//借助插件

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瀏覽器關(guān)上失常，以上操作猛如虎，IE瀏覽器關(guān)上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)題無(wú)關(guān)了，按需引入時(shí)，那些組件里js文件未進(jìn)行babel轉(zhuǎn)換或轉(zhuǎn)換不徹底就被引入了，ie11對(duì)es6+的語(yǔ)法反對(duì)是很差的，所以以上辦法就是讓引入文件前就對(duì)view-design的src下的所有js文件進(jìn)行babel轉(zhuǎn)換，觸類旁通，當(dāng)按需引入第三方框架時(shí)呈現(xiàn)這個(gè)問(wèn)題，都可用這辦法解決了，只有把規(guī)定和正則中view-design進(jìn)行替換。

延長(zhǎng)擴(kuò)大

//全局引入

import ViewUI from "view-design";

Vue.use(ViewUI);

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

tips:在全局引入時(shí)，肯定要記住不要在.babelrc文件里配置按需導(dǎo)入，會(huì)導(dǎo)致抵觸

新人創(chuàng)作打卡挑戰(zhàn)賽發(fā)博客就能抽獎(jiǎng)！定制產(chǎn)品紅包拿不停！

總結(jié)

以上是生活随笔為你收集整理的html引入vue不兼容ie11,关于vue.js:iview按需引入ie11不兼容报无效字符问题解决的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。