layui.extend怎么同时引入多个不同目录下的第三方开源插件模块

夜明同学_9143

夜明同学_9143

2026-10-31

674人浏览

原创

Layui.extend 不支持多个 base 路径,必须统一 base;可用 {/} 前缀写绝对路径临时绕过,但需确保模块规范;依赖需手动声明且加载顺序正确,否则报 404 或 module not defined。

layui.extend怎么同时引入多个不同目录下的第三方开源插件模块

layui.extend 里怎么写多个不同 base 路径的模块

不能。layui.config({ base: 'xxx' }) 只能设一个 base,所有 extend 里的路径都相对于这个 base 解析——这是 Layui 模块加载器的硬性限制,不是配置疏漏。

想让多个插件来自不同物理目录,必须统一归口到一个逻辑根目录下,再用子路径区分。比如:

  • 把 /js/area-select/areaselect.js 拷到 /res/layui_exts/areaselect/areaselect.js
  • 把 /static/js/treetable.js 拷到 /res/layui_exts/treetable/treetable.js
  • 把 /vendor/eleTree/eletree.js 拷到 /res/layui_exts/eleTree/eletree.js

然后统一配 base:

layui.config({
  base: '/res/layui_exts/'
}).extend({
  areaSelect: 'areaselect/areaselect',
  treetable: 'treetable/treetable',
  eleTree: 'eleTree/eletree'
});

遇到路径报错:404 或 “module is not defined” 怎么排查

常见错误现象:Failed to load resource: the server returned a 404,或控制台提示 layui module "xxx" not found。

  • 检查浏览器 Network 面板,看实际请求的 URL 是什么——它一定是 base + extend 中写的路径 拼出来的,和你本地文件结构是否一致?
  • extend 键名(如 'areaSelect')只是别名,不决定文件位置;值(如 'areaselect/areaselect')才是相对 base 的真实路径,且不带 .js 后缀
  • 如果插件本身依赖其他 JS(比如 eletree.js 依赖 vue),Layui 不会自动加载,得手动在 define 的依赖数组里声明,或提前全局引入
  • 某些第三方插件没按 Layui 规范封装(缺 layui.define() / exports()),直接扔进去会报 module is not defined,必须先改造

想绕过 base 统一约束:用 {/} 前缀写绝对路径

Layui 支持在 extend 的值里用 {/} 开头,表示跳过 base,走绝对路径(从站点根目录开始)。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载

例如:

layui.config({
  base: '/res/layui_exts/'
}).extend({
  areaSelect: '{/}js/area-select/areaselect',
  uploader: '{/}static/js/uploader/uploader'
});
  • {/}js/area-select/areaselect → 实际请求 /js/area-select/areaselect.js
  • 注意:仍需确保该路径下有符合 Layui 模块规范的 JS 文件(含 layui.define 和 exports)
  • 不推荐大量使用,会让模块路径分散、维护成本升高;仅适合临时兼容旧结构或无法移动文件的场景

多个插件之间有依赖关系时怎么处理

比如 treetable 内部要用到 table 模块,而你又单独扩展了 tableSelect,它们共用 table 但版本不一致,就容易出问题。

  • 优先复用 Layui 官方 table,不要重复扩展同名模块(如 table: 'xxx/table'),否则后加载的会覆盖前一个
  • 若插件 A 依赖插件 B,B 必须在 A 之前被 use 加载,或在 A 的 define 依赖数组中声明(如 layui.define(['jquery', 'B'], ...))
  • 避免循环依赖:A define 里 require B,B 又 require A —— Layui 不支持,会卡死或报错
  • 调试时可临时加 console.log('mod A loaded') 在每个模块 define 开头,确认加载顺序

真正麻烦的从来不是怎么写 extend,而是插件本身是否遵循规范、路径是否收敛、依赖是否干净——这些细节不提前对齐,后面花三倍时间也调不完。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

layui layui菜鸟教程

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

3180

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2993

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1161

6

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

2023.07.17

285

5

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.04

406

5

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2025.12.24

395

12

Vite 项目如何打包和部署
Vite 项目如何打包和部署

Vite项目打包部署专题汇集生产构建、产物预览、输出目录、资源路径、Nginx与GitHub Pages部署及常见白屏和路由404问题的已审核文章,帮助读者完成上线流程。

2026.10.28

60

16

Vite 如何搭配 Vue.js
Vite 如何搭配 Vue.js

Vite搭配Vue.js专题汇集创建Vue 3项目、配置开发环境、路径别名、Vue插件、代理、多环境构建与调试的已审核文章,帮助读者完成从初始化到日常开发的配置。

2026.10.28

40

15

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 13.1万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.4万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习