layui.config詳解

一、layui.config什麼意思

在了解layui.config之前，我們需要先了解 layui 靜態文件載入器。它是一個簡化的資源載入器，可以自動為模塊分析和處理其依賴關係。 layui.config 是 layui 靜態文件載入的第一行代碼，其作用是為 layui 配置信息。通過layui.config 可以方便地引入功能模塊，在編寫 layui 的項目時，layui.config 操作需要格外注意。

二、layui.config的使用

使用 layui.config 首先要引入 layui.js 文件，當 HTML 頁面出現一個標識成layui.js 的 script 標籤時，瀏覽器會將其解析為 JavaScript 腳本並立即執行。在載入 layui.js 時，您可以將layui.config寫在幾乎所有前端的 js 文件之前，這樣就可以在使用任何模塊之前修改 layui 配置了，同時也方便layui載入器對依賴進行分析。

    // 在layui.js 文件之前引入
    
    
        layui.config({
            version: '2.5.6',
            base: '/res/custom/', // 自定義樣式地址，layui默認引入的是基礎的樣式，我們可以在這裡配置自定義樣式路徑
            modules: { // 配置模塊
                laydate: 'laydate', // 模塊名:文件名
                laypage: {
                    deps: ['laypage.css', 'laypage.js'], // 配置依賴
                    url: 'laypage/laypage.js'
                },
                treeTable: {
                    url: '/modules/plat/treeTable/treeTable.js',
                    // 設置為 false 可不載入該模塊，而只我們外部不會發現
                    // 惡意跳過依賴模塊，直接載入該模塊則會有報錯
                    done: function () {
                        console.log('模塊 treeTable 被載入完成！');
                    }
                }
            }
        });
    

三、layui.config的配置參數

在 layui.config 中可以配置多個參數，下面是常見的配置參數列表：

1、version

表示 layui 版本號，版本號不對會影響某些功能的使用。

    layui.config({
        version: '2.5.6', //設定版本號
    });

2、base

可以配置 layui 自帶模塊的路徑或自定義模塊的路徑，如配置了自定義路徑，layui 會去該路徑下查找模塊。如果不配置則默認為 layui.cache.dir。

    layui.config({
        base: '/res/custom/', // 自定義樣式地址
    });

3、mods

用於配置模塊地址和依賴關係，每個模塊名都與其對應文件名或文件路徑相對應，均可以省略文件類型後綴名（.js 和 .css）。

    layui.config({
        modules: {
            code: 'CodeMirror/lib/code.js', // 路徑
            dtree: { // 模塊名:文件名
                deps: [
                    '/modules/dtree/dtree.css'
                ],
                url: '/modules/dtree/dtree.js'
            }
        }
    });

4、debug

debug 模式下 layui 會輸出模塊載入情況，通常在開發階段使用。

    layui.config({
        debug: true, // 是否開啟調試模式
    });

5、charset

layui.config 中的 charset 選項用來指定輸出內容的字符集，對於漢字網站來說，很重要。如果不設置字符集，默認為 utf-8。

    layui.config({
        charset: 'utf-8'
    });

四、layui.config的注意點

1. layui.config 一定要在 layui 的靜態文件載入前引入；

2. layui.config 的 modules 配置項中配置的模塊名，需要與對應的模塊文件名（或路徑名）一致；

3. 配置自定義路徑的 base 最後必須加上「/」，否則也會造成相對路徑載入出問題；

4. 對於不是 layui 的內置模塊，模塊的 name 和 path 必須一致，否則會載入不出來；

5. layui 通過載入的模塊都會緩存到 layui 的模塊緩存中，模塊一旦被定義後，除非確實不需要，要避免直接刪除模塊定義文件。