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 許可協議。轉載請註明出處！