籌備工作

//借助插件

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文件里配置按需導入，會導致抵觸

新人創作打卡挑戰賽發博客就能抽獎！定制產品紅包拿不停！

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。