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