外部js未加载主因是src路径错误,需检查相对/绝对路径、script位置(推荐放前)、type属性(模块须写type="module")、本地cors限制(需http服务而非file://协议)。

script 标签的 src 属性必须写对路径
外部 JS 文件没加载,十有八九是 src 路径错了。浏览器不会报错,但控制台里 net::ERR_ABORTED 或 404 就说明文件根本没发请求过去。
- 相对路径以当前 HTML 文件位置为基准,不是以 JS 文件位置算
-
src="js/main.js"表示 HTML 同级目录下有个js/文件夹,里面放main.js - 用
src="./js/main.js"更明确,避免某些服务器对省略./的解析差异 - 绝对路径从域名根目录开始,比如
src="/assets/script.js",注意开头的/
script 标签放哪儿影响执行时机
JS 文件加载后立即执行,顺序和位置直接决定变量能不能用、DOM 元素存不存在。
- 放在
里,脚本执行时还没解析,document.getElementById拿不到元素 - 加
defer属性:<script src="app.js" defer></script>,脚本会等 HTML 解析完再执行,且保持顺序 - 加
async属性:下载不阻塞 HTML,但执行时机不确定,适合无依赖的统计脚本 - 最稳妥的做法是把
<script></script>放在前面,确保 DOM 已就绪
type 属性现在可以省,但 module 模式必须显式声明
老项目可能还留着 type="text/javascript",其实现代浏览器默认就是 JS,写了反而多余;但用 ES Module 就必须写对。
- 普通脚本:
<script src="utils.js"></script>,不用写type - ES Module:
<script type="module" src="main.mjs"></script>,否则import语法会直接报错Unexpected token 'export' -
type="module"自动启用defer行为,不需要额外加 - 模块脚本的
import路径必须带扩展名(如.js)或协议(如https://),不能写import {foo} from 'lib'
CORS 问题常出现在本地双击打开 HTML 时
用 file:// 协议打开 HTML,浏览器会禁止加载外部 JS(哪怕只是同目录下的 script.js),报错 Cross origin requests are only supported for protocol schemes。
立即学习“Java免费学习笔记(深入)”;
- 这不是代码写错了,是浏览器安全限制,本地开发必须走 HTTP 服务
- 用 VS Code 的 Live Server 插件、
npx serve、或者 Python 的python3 -m http.server都行 - 线上部署不存在这问题,只要服务器返回正确的
Content-Type: application/javascript就能正常加载











