cdn引入失败导致白屏的根本原因是网络策略拦截或资源不可达，而非代码错误；需通过onerror降级、根相对路径、锁定小版本号、sri校验四者闭环保障稳定性。
CDN引入失败时为什么页面直接白屏
根本原因不是代码写错了，而是网络策略拦截或资源不可达。常见错误信息是 net::ERR_CONNECTION_TIMED_OUT 或 Failed to load resource，尤其在企业内网、国内弱网环境访问 unpkg.com 或 jsdelivr.net 时高频出现。
关键不是换链接，而是加降级逻辑：
用 onerror 属性 fallback 到本地文件，且必须确保该路径真实存在、可被服务托管访问：
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js" onerror="this.src='js/vue.global.js'"></script>
-
onerror只能配一个降级目标，嵌套多个会触发死循环 - 不要在
onerror里调用document.write—— 现代浏览器已禁用 - 本地文件建议用未压缩版（如
vue.global.js而非vue.global.min.js），方便调试 - 双击打开 HTML 文件走的是
file://协议，Chrome 会直接阻止所有script加载，必须用http://localhost:8080启动本地服务验证
本地引入报 404 的真实原因和检查方法
90% 的 net::ERR_FILE_NOT_FOUND 不是文件没放对，而是路径解析错位。HTML 中的 ./js/vue.js 是相对于当前 HTML 文件所在目录计算的，不是项目根目录。
比如 HTML 在 /pages/index.html，那 ./js/vue.js 就会去找 /pages/js/vue.js，而不是你预期的 /js/vue.js。
- 推荐统一使用根相对路径：
/js/vue.js（开头带/），但前提是启动了本地 HTTP 服务，且 Web 服务器能正确映射到该路径 - 最可靠的方式是打开浏览器开发者工具的 Network 面板，看实际发起请求的完整 URL，比猜路径快得多
- 检查服务器是否配置了正确的 MIME 类型（尤其是
.mjs文件，需返回text/javascript）
CDN 版本号不锁定导致运行时崩溃
写成 https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.js 表面省事，实则高危。Vue 从 v3.4 升到 v3.5 时，createApp 参数签名变了；Chart.js 从 v4.4 升到 v4.5，plugins.legend.labels.generateLabels 返回值结构被调整 —— 这些都不是兼容更新，而是直接抛 TypeError。
- 必须显式锁定小版本号，如
@3.4.21，而非@3或@3.4 - CDN 域名也建议收敛：全部走
cdnjs.cloudflare.com，避免混用unpkg.com、jsdelivr.net、code.jquery.com - 每个
script标签都应加上integrity和crossorigin，启用 SRI 校验：integrity="sha256-..." crossorigin="anonymous"
本地 vs CDN 的调试体验差异极大
CDN 加载的通常是压缩混淆版（如 chart.umd.min.js），DevTools 默认不显示源码映射，打断点只能停在一行压缩代码里；而本地引入未压缩版（如 chart.js），变量名、函数结构一目了然。
- 查 bug 阶段优先本地引入开发版，上线前再切回 CDN + SRI + 降级逻辑
- 若 CDN 提供
.map文件（如chart.umd.js.map），要确认它与 JS 文件同目录可访问，且浏览器开启了 Enable JavaScript source maps - 某些库（如
moment.js）CDN 版默认不暴露全局moment，得确认用的是 UMD 或 IIFE 构建产物，否则window.moment是undefined
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
