乐趣区

关于vue.js:iview按需引入ie11不兼容报无效字符问题解决

筹备工作

// 借助插件
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 文件里配置按需导入,会导致抵触

退出移动版