Vue-cli 3.0 配置iview

(一) 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中中进行配置

配置如下：

1. iview创建自定义主题样式文件，可以参考官网的案例 查看

2. 配置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() 
            } 
    }

复制代码

本文作者： Echi
本文链接： juejin.im/user/585e36…
版权声明： 本文章除特别声明外，均采用 @BY-NC-SA 许可协议。转载请注明出处！