(一) iview 配置自定义主题
按照iview官网配置会出现如下错误
Module build failed (from ./node_modules/less-loader/dist/cjs.js):
// https://github.com/ant-design/ant-motion/issues/44
.bezierEasingMixin();
^
Inline JavaScript is not enabled. Is it set in your options?
in /el-admin/node_modules/iview/src/styles/color/bezierEasing.less (line 111, column 0)
上述错误需要将less的javascriptEnabled设置为true,接下来我们在vue-cli3中中进行配置
配置如下:
iview创建自定义主题样式文件,可以参考官网的案例 查看
配置vue.config.js文件
module.exports = {
css: { // 配置css模块
loaderOptions: { // 向预处理器 Loader 传递配置选项
less: { // 配置less(其他样式解析用法一致)
javascriptEnabled: true // 设置为true
}
}
}
}
以上的配置你也可以参考VueCli文档 查看
通过以上的配置,就可以解决iview的自定义主题的错误问题。
(二) iview 配置按需引入组件
按照iview官网提供的配置进行按需引入会在IE下报错
解决方法: (适用于vue-cli3 构建的项目)
在项目根目录创建vue.config.js 写入如下配置:
module.exports = {
chainWebpack: config => {
// ie报错无效字符 添加该配置项 解决该问题
config.module
.rule('iview')
.test(/iview.src.*?js$/)
.use('babel')
.loader('babel-loader')
.end()
}
}