layui.config详解

小蓝 • 2024-12-26 13:15 • 编程

一、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 的模块缓存中，模块一旦被定义后，除非确实不需要，要避免直接删除模块定义文件。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/293964.html