src属性路径错误会导致静默失败而非报错；相对路径以html文件位置为基准，根相对路径以域名后首斜杠为起点，绝对url走网络请求；css中url()与src规则一致；构建工具仅重写静态字符串路径，动态路径需手动确保有效；ssr场景下需用完整url或构建工具注入的公共路径前缀。
src 属性在 <script></script> 中不是“能用就行”，路径错、写法错、时机错，脚本就静默消失——连控制台错误都不报。
src 必须指向 .js 文件，且内容必须是纯 JavaScript
浏览器只认 .js 扩展名。写成 <script src="utils.html"></script> 或 <script src="config.json"></script>，浏览器会发请求、收到响应，但直接忽略执行，也不报错。
- ✅ 正确：
<script src="/static/js/main.js"></script> - ❌ 错误：
<script src="api.ts"></script>（TypeScript 源码不会被编译） - ❌ 错误：
<script src="bundle.js.map"></script>（source map 不是可执行脚本）
src 值必须是静态 URL，不能是变量或运行时拼接
浏览器只在 HTML 解析阶段读取 src 属性的原始字符串值，之后改 DOM 属性（比如 el.src = 'a.js'）不会触发加载。
- ✅ 正确：直接写死路径，
<script src="./lib/lodash.min.js"></script> - ❌ 错误：
<script id="loader">document.getElementById('loader').src = 'v2/' + version + '.js';</script> - ⚠️ 注意：路径中含空格、中文、未编码的
#或?会导致net::ERR_ABORTED，但控制台可能只显示“failed to load resource”
带 src 的 script 标签里不能混写内联代码
一旦用了 src，<script src="x.js">console.log('hi');</script> 里的 console.log 完全被忽略——浏览器只下载并执行 x.js。
- ✅ 正确：分离职责，外部文件专注逻辑，HTML 只负责加载
- ❌ 错误：试图在带
src的标签里写初始化代码，结果发现它从不执行 - ? 替代方案：用
onload回调触发后续逻辑，比如<script src="helper.js" onload="initHelper()"></script>
跨域、模块、本地开发时的隐性限制
这些场景下 src 表面能发请求，但实际执行会被拦住，而且往往不提示具体原因。
- ⚠️
type="module"要求所有import路径带.js后缀，且src本身也必须是.js；file://协议下 Chrome 直接拒绝模块加载（CORS），必须起本地服务 - ⚠️ 跨域脚本出错时，
window.onerror只收到"Script error."，真实堆栈被屏蔽；只能靠onerror属性捕获“加载失败”，无法知道语法错还是运行时报错 - ⚠️ 多个
<script src="..."></script>并列写在 HTML 中，不保证执行顺序——尤其 HTTP/2 下小文件可能比大文件先执行完
最常被跳过的其实是路径基准问题：相对路径以 HTML 文件位置为起点，不是 JS 文件、也不是服务器根目录；而 /xxx.js 是从域名根开始，开发时用 file:// 就直接失效。这两层解析规则不报错，但脚本就是不执行——得手动检查 Network 面板里请求的 URL 到底对不对。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
