JS文件未加载、DOM未就绪、依赖缺失、编码异常是空白页四大主因：检查404报错与路径；确保初始化在DOMContentLoaded后；验证jQuery等依赖前置引入；确认DOCTYPE和UTF-8无BOM编码。
JS 文件未正确加载或路径错误
空白页最常见原因是 script 标签引用的 JS 插件文件根本没加载成功。浏览器控制台（F12 → Console / Network）里通常会报 404 或 Failed to load resource，说明路径写错了、文件名大小写不一致、或服务器没部署该文件。
- 检查
<script src="xxx.js"></script>中的路径是否为相对路径（如./js/plugin.js）且相对于当前 HTML 文件位置正确 - 用 Network 面板刷新页面，看插件 JS 是否显示为红色（失败）或状态码不是
200 - 避免在本地双击打开 HTML（
file://协议），某些插件依赖http://或https://，会因跨域或 CORS 拒绝执行
插件初始化时机不对：DOM 未就绪就调用
如果插件需要操作页面元素（比如绑定到 #chart 容器），但 JS 在 中执行时 DOM 还没解析完，就会找不到节点、报 Cannot read property 'xxx' of null，甚至静默失败导致空白。
- 把初始化代码放到
底部，或包裹在DOMContentLoaded事件里：document.addEventListener('DOMContentLoaded', () => { new Plugin('#chart'); }); - 使用 jQuery 的话，确保写在
$(function() { ... });内，而非直接执行 - 某些插件（如 Chart.js）要求容器有明确宽高，若父元素无尺寸、CSS 设置为
display: none，也可能渲染为空白
插件依赖未满足或版本冲突
很多 JS 插件依赖其他库（如 jQuery、Lodash、moment.js），或者对主框架版本敏感（例如 Bootstrap 4 插件在 Bootstrap 5 下不可用）。缺少依赖常导致 ReferenceError: $ is not defined 或 Plugin is not a constructor，而控制台可能只报错第一处，后续逻辑直接中断。
将静态 Vue 页面(index.vue)改造为动态页面(Custom.vue)；稿源仅限 index.vue、其引用的 CSS 与资源路径，禁止参考仓库内其他文件。Invoke when user wants to transform a static Vue page into a dynamic data-driven page with Element UI components.
- 查阅插件文档的 “Dependencies” 小节，确认是否漏引了
jquery.min.js等前置脚本 - 检查多个
<script></script>标签顺序：依赖项必须在插件之前加载 - 避免混用不同大版本（如引入了
vue@3，却用了只兼容vue@2的 UI 插件） - 某些插件（如 old version of DataTables）在严格模式下会抛异常，可临时加
"use strict";前置判断是否触发
HTML5 文档类型或编码引发解析异常
看似无关，但 缺失、或 <code><meta charset> 与实际文件编码不一致（如文件存为 UTF-8 BOM，但声明为 charset=utf-8），会导致 JS 解析失败，尤其含中文注释或字符串时，可能卡在语法错误上，整个脚本不执行。
立即学习“前端免费学习笔记（深入）”；
- 确认 HTML 开头第一行是严格的
（无空格、无 XML 声明） - 用编辑器（如 VS Code）查看文件真实编码，保存为 “UTF-8 无 BOM” 并匹配
<meta charset="UTF-8"> - 禁用所有浏览器插件（尤其是广告拦截、JS 注入类），排除干扰；再试隐身窗口
