Layui 本身不是为 ESM 设计的，import 'layui-src' 能运行但不推荐用于 Webpack/Vite 生产项目；应避免打包其 JS，改用 script 标签异步加载并确保全局 layui 可用，否则易触发未定义、重复初始化等问题。

直接说结论：Layui 本身不是为 ESM 模块化设计的，import 'layui-src' 能跑但不推荐用于 Webpack/Vite 生产项目；真正可控、可维护的方式是「不打包 Layui JS，只加载其 CSS，并用 script 标签异步挂载」——否则极易触发 layui is not defined、layui.use is not a function 或模块重复初始化问题。

为什么 import 'layui-src' 在 Webpack/Vite 中容易出错

Layui 的源码（尤其是 layui.js）依赖全局 window.layui 和自执行函数 IIFE 模式，在现代打包工具中会破坏其运行上下文：

• webpack 会对 layui.js 做模块封装，导致 layui.use 内部找不到原始模块注册表
• vite 默认启用 ESM，而 Layui 不导出 default 或具名导出，import 'layui-src' 实际只执行了代码，但 layui 未被注入到全局作用域（尤其在 SSR 或 HMR 场景下）
• 多个组件反复 import 'layui-src' → 多次执行初始化逻辑 → table.render 报 elem is not found 或渲染空白
• layui-src 包含大量未声明的全局变量（如 lay, layui.cache），Webpack 的 module.noParse 或 Vite 的 optimizeDeps.exclude 配置稍有遗漏就会报错

Webpack 项目中安全引入 Layui 的实操方式

核心原则：让 layui.js 绕过打包，作为外部资源加载；CSS 可走 loader 正常处理。

VitePress Generator

使用 VitePress 快速生成静态网站，支持安装依赖、初始化项目、本地预览、构建和部署。

下载

• 在 webpack.config.js 中配置 externals：

  externals: {
    layui: 'layui'
  }

  然后在 HTML 模板（如 index.html）的 <head> 或 <body> 底部手动插入：

  <script src="./node_modules/layui-src/dist/layui.js"></script>

• CSS 文件仍可由 css-loader + MiniCssExtractPlugin 处理：

  import 'layui-src/dist/css/layui.css';

  确保路径正确，且不重复 @import 同一文件
• 组件内使用时，**必须等 DOM 就绪 + layui 加载完成**，不要依赖 mounted 立即调用：

  mounted() {
    const script = document.createElement('script');
    script.src = '/path/to/layui.js'; // 推荐放 public 目录
    script.onload = () => {
      layui.use(['table', 'form'], () => { /* ... */ });
    };
    document.body.appendChild(script);
  }

Vite 项目中更轻量的接入方案

Vite 的 defineConfig 不支持 externals，但可通过 optimizeDeps.exclude + 手动 script 注入实现类似效果：

立即学习“前端免费学习笔记（深入）”；

• 在 vite.config.js 中排除 Layui：

  optimizeDeps: {
    exclude: ['layui-src']
  }

• 将 layui.js 和 layui.css 复制到 public/layui/ 目录（Vite 会原样暴露）
• 在 main.js 顶部或根组件 onBeforeMount 中动态加载：

  if (!window.layui) {
    const s = document.createElement('script');
    s.src = '/layui/layui.js';
    s.onload = () => {
      // 确保后续 use 调用安全
      window.layui?.use?.(['layer'], () => {});
    };
    document.head.appendChild(s);
  }

• 样式统一用 import '/layui/layui.css'（注意路径以 / 开头，表示从 public 根目录读取）

真正要警惕的三个隐藏坑

这些点几乎没人提，但线上项目踩中一个就白忙半天：

• layui.js 里硬编码了 layui.cache.dir 路径，默认指向 ./layui/ —— 如果你把文件放在 public/layui/，但没改这个值，图标、模板等资源会 404；解决方法：在 script 加载后立即覆盖：

  window.layui.cache.dir = '/layui/';

• Vite 开发模式下 HMR 触发时，layui.use 的回调可能被多次注册，造成表格重复渲染或 layer 弹窗叠层；建议加防重逻辑：

  if (window.layuiTableInited) return; window.layuiTableInited = true;

• Webpack 的 SplitChunksPlugin 可能误把 layui-src 拆进 vendor chunk，导致 layui 在 layui.js 还没加载完时就被引用；务必在 optimization.splitChunks 中显式 cacheGroups 排除：

  layui: { test: /[\/]node_modules[\/](layui-src)[\/]/, priority: -20, enforce: true }