layui is not defined 的根本原因是 layui.js 未正确加载,需检查 Network 面板中其请求状态码是否为200、路径是否正确(推荐绝对路径)、是否被后端框架或中间件拦截。

检查 Network 面板里 layui.js?v=xxx 的实际请求地址和状态码
直接打开浏览器开发者工具 → Network 标签页,刷新页面,筛选 js 或输入 layui.js 搜索。重点看这一行的:Status 是否为 200,以及 Headers → Request URL 是什么。常见错误是显示 404,但 URL 却是类似 http://localhost:8080/js/layui.js?v=2.9.21 —— 这说明路径写死了相对位置,而服务器根本没把 /js/ 映射到对应物理目录。
如果 URL 中含 v=xxx 但实际文件名不含版本号(比如你只放了 layui.js),那是正常现象:Layui 自动加的查询参数,不影响加载;真正要命的是路径本身 404。
确认静态资源是否被后端框架拦截或未映射
Spring Boot 默认将 /static、/public、/resources 下的文件自动映射到 /**,但如果你改过 application.yml 的 spring.web.resources.static-locations,或加了 @EnableWebMvc,就可能切断默认行为。
- 删掉
@EnableWebMvc注解(它会覆盖全部默认配置) - 检查是否手动写了
addResourceHandlers却漏配了/js/**路径 - 用浏览器直接访问
http://localhost:8080/js/layui.js(不带任何模板或控制器路由),看能否下载文件——这是最硬的验证方式
修复 HTML 中 <script> 标签的 src 路径写法
Layui 对路径敏感,尤其在嵌套子页面、使用 $.load() 或前后端分离场景下,相对路径极易失效。别依赖 ../ 猜测层级,统一用绝对路径:
- 错的:
<script src="js/layui/layui.js"></script>(依赖当前 HTML 所在目录) - 对的:
<script src="/js/layui/layui.js"></script>(从根路径开始) - Thymeleaf 用户必须用:
<script th:src="@{/js/layui/layui.js}"></script> - Angular 用户需确保
angular.json中scripts条目指向assets/layui/layui.js,且代码里没漏掉declare var layui;
注意:/js/layui/layui.js 这个路径,必须和你实际部署时 Web 容器暴露的静态资源路径完全一致——不是“项目里放哪”,而是“浏览器能通过哪个 URL 访问到”。
排查 Nginx / Tomcat / 拦截器导致的 404
有时候路径没错、配置也没动,但就是 404。这时候大概率是中间层拦了:
- Tomcat:检查
web.xml或 Spring Security 配置,是否对/js/**做了权限拦截(比如要求登录才能访问静态资源) - Nginx:查看
location块有没有误配deny all或没把/js/加进try_files - Java 拦截器:像 Shiro 或自定义
HandlerInterceptor,若没放行/js/**和/css/**,就会返回 404 或重定向到登录页 - IDE 缓存:IntelliJ 的 “Invalidate Caches and Restart” + 浏览器硬刷新(Ctrl+F5)再试一次
最容易被忽略的一点:Layui 的模块(如 form、layer)内部会动态加载其他 JS/CSS(比如 lay/modules/laydate.js),它们的路径依赖 layui.js 所在目录。一旦主文件 404 或路径错,后续所有模块都会连锁报错——所以别看到一个 404 就停,先把它摁死。


















