他的龙根本太大了_动漫美女被吸乳视频漫画_欧美xxxx性疯狂bbbb_天天看天天爽天天摸天天添

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轉(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文件未進行babel轉(zhuǎn)換或轉(zhuǎn)換不徹底就被引入了,ie11對es6+的語法支持是很差的,所以以上方法就是讓引入文件前就對view-design的src下的所有js文件進行babel轉(zhuǎn)換,舉一反三,當按需引入第三方框架時出現(xiàn)這個問題,都可用這方法解決了,只要把規(guī)則和正則中view-design進行替換。


延伸擴展

//全局引入

import ViewUI from "view-design";

Vue.use(ViewUI);

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

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

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

日歷

鏈接

個人資料

藍藍設(shè)計的小編 http://m.ssll180.com

存檔