script src引入失败的常见原因包括路径错误（相对/绝对路径基准混淆、含空格或中文）、协议不匹配（http/https混合内容被拦截）、执行时机不当（未加defer/async导致dom未就绪）、以及静默失败（如404但控制台无提示，需查network面板）。
script src 引入失败的常见原因
脚本没加载成功，大概率不是写法错，而是路径、协议或执行时机问题。src 属性只接受绝对路径或相对路径字符串，不支持表达式或变量拼接（除非用 DOM 动态创建）。
-
src值为空、含空格或中文字符时，浏览器静默忽略，控制台可能只报net::ERR_ABORTED - 用相对路径时，基准是当前 HTML 文件所在目录，不是
script标签位置（HTML 没有“就近解析”概念） - 混用 HTTP 和 HTTPS 会触发混合内容拦截，Chrome 直接阻止加载，控制台显示
Mixed Content错误 -
script放在里且没加defer或async，脚本会阻塞 DOM 解析，但若脚本依赖尚未渲染的元素（比如document.getElementById），就容易报null
相对路径 vs 绝对路径怎么选
开发阶段建议用相对路径，上线后若部署在子路径（如 /myapp/），相对路径仍能工作；绝对路径以 / 开头，始终从域名根目录开始找，适合资源位置固定、跨多级目录引用的场景。
- 同目录：
<script src="main.js"></script> - 子目录：
<script src="js/utils.js"></script> - 上一级：
<script src="../lib/jquery.min.js"></script> - 根目录起：
<script src="/static/js/app.js"></script>（注意开头的/） - CDN 地址必须带协议或用协议相对：
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js"></script>或<script src="//cdn.jsdelivr.net/npm/vue@3.4.21/dist/vue.global.js"></script>
script 标签放哪儿才安全
默认同步加载，放 会阻塞渲染；放 底部虽能避免 DOM 未就绪问题，但对现代构建流程（如 Vite、Webpack）已非必需——关键是明确加载行为。
- 想等 DOM 就绪再执行：加
defer，脚本并行下载、按顺序执行，且保证 DOM 解析完成后再运行 - 不依赖 DOM、可独立执行：加
async，下载完立刻执行，顺序不保证 - 纯模块脚本（
type="module"）默认表现类似defer，且自动启用严格模式、支持import - 避免在
写内联脚本去操作document.body—— 它此时还不存在
调试 script src 加载是否成功
别只看控制台有没有红色报错，很多失败是静默的。打开浏览器开发者工具的 Network 面板，筛选 JS 类型，看目标文件状态码是不是 200；点击该请求，检查 Response 是否返回了预期 JS 内容（而不是 404 页面 HTML 或 Nginx 默认页）。
- 右键检查
<script></script>元素，看属性里src值是否被意外修改（比如模板引擎注入出错） - 在控制台手动执行
document.querySelector('script[src="xxx.js"]').src，确认实际解析后的 URL 是什么（可能被 base 标签或重定向影响） - 如果用了构建工具，确保输出目录结构和
src路径一致；Vite 默认把public/下文件映射到根路径，而src/下需通过import或构建后路径引用
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
