layui怎么实现在控制台打印格式化友好的开发环境版本提示-Layui教程-PHP中文网

layui v2.6+ 可在 layui.use 前通过检测 layui.v 和 location.href 输出带颜色、环境标识和模块路径的控制台提示，开发环境标红显示「[dev]」并含路径信息，生产环境标青显示「[prod]」，需确保脚本在 layui.js 加载后执行且正则覆盖实际测试域名。

layui怎么实现在控制台打印格式化友好的开发环境版本提示

怎么让 layui 在控制台输出带版本号和环境标识的友好提示

直接在页面加载后、layui.use 之前执行一段检测逻辑，就能在控制台打出清晰可读的版本与环境信息。Layui 本身不提供内置的「开发提示」API，但它的全局对象 layui 上挂载了 layui.v（版本字符串）和 layui.cache（含模块路径等），足够我们手动拼出一条带颜色、带图标、带上下文的提示。

为什么不能只用 `console.log('layui v' + layui.v)`

这样虽然能打印版本，但缺乏区分度：没有颜色标记、无法快速识别是否为开发环境、没包含构建时间或模块加载状态。更关键的是，生产环境不该出现这类提示——必须做环境判断。

开发环境通常有 localhost、127.0.0.1、.local 或未部署的 file:// 协议
生产环境一般走域名，且常通过 Nginx/Apache 反向代理，window.location.hostname 是真实域名
layui.cache 中的 modules 字段长度可粗略反映模块加载完整性（非空即已初始化）

推荐的实操写法（兼容 2.6+ 所有主流版本）

把下面这段代码放在 <script></script> 标签中，且确保它在 layui.js 加载完成之后、任何 layui.use 调用之前执行：

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

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

下载

if (layui && layui.v) {
  const isDev = /localhost|127\.0\.0\.1|\.local|^file:\/\//i.test(location.href);
  const envLabel = isDev ? '%c[DEV]' : '%c[PROD]';
  const color = isDev ? 'color:#ff6b6b;font-weight:bold;' : 'color:#4ecdc4;font-weight:bold;';
  
  console.log(
    `%c layui v${layui.v} —— ${isDev ? '开发环境' : '生产环境'}`,
    `font-size:14px;${color}`,
    '\n%c模块路径:', 'color:#95a5a6',
    layui.cache ? layui.cache.dir || '未知' : '未初始化'
  );
}

注意：layui.cache.dir 是实际模块根路径（如 /static/layui/），比硬写 CDN 地址更可靠；如果项目用了自定义模块路径，这个值会自动匹配。

容易被忽略的坑

有三个地方极易出错，导致提示不显示或报错：

脚本位置太早：放在里但 layui.js 还没加载完，layui 是 undefined → 改成 window.onload 或监听 DOMContentLoaded 后再查
误判环境：某些内网测试域名（如 test.company.internal）没加进正则 → 建议把常见测试域名也加入 isDev 判断逻辑
控制台过滤：Chrome 默认会折叠重复日志，若你刷新多次，可能只看到一条 → 在控制台右上角点「设置」→ 关闭「Hide similar messages」

真正复杂的地方在于环境判定边界——比如 Docker 容器内开发、Electron 桌面应用、或者用 Vite 代理到本地服务，这些场景下 location.href 的特征各不相同，需要按实际部署方式微调正则。