type="module"强制import路径必须带./或/前缀及.js扩展名，因浏览器仅做静态解析、不补全；模块执行按依赖拓扑序而非html顺序；file://协议下被cors拦截导致无请求。
为什么加了 type="module" 后 import 路径必须带 ./ 和 .js
浏览器对 import 的路径做静态解析，不走任何运行时补全逻辑。它不是 Node.js，也不查 node_modules，更不会自动加扩展名或推断相对路径。
常见错误现象：Failed to load module script 或 SyntaxError: Cannot resolve module，往往就卡在这一步。
-
import { foo } from './utils.js'✅ 显式前缀 + 显式扩展名 -
import { foo } from './utils'❌ 浏览器不补.js，直接失败 -
import { foo } from 'utils.js'❌ 裸路径无法判断是相对还是绝对，语法报错 -
import { foo } from '/js/utils.js'✅ 根相对路径，前提是服务器能响应该 URL
多个 type="module" 脚本的执行顺序为什么不能靠 defer 控制
它们默认就是 defer，但这个“延迟”不是传统意义上的 DOM 加载后执行，而是由模块图（Module Graph）决定的拓扑序——谁依赖谁，谁先执行，跟 script 标签在 HTML 中的位置无关（除非无显式依赖）。
容易踩的坑：你写了两个 <script type="module" src="a.js"></script> 和 <script type="module" src="b.js"></script>，以为加了 defer 就能控制先后，其实只要 b.js 里 import 了 a.js，a.js 就一定先执行，哪怕它在后面。
- 模块图构建发生在 HTML 解析阶段，早于执行
- 即使
b.js下载更快，也会等a.js实例化完成才开始求值 - 想强制顺序又无依赖关系？只能合并成一个模块，或用动态
import()手动串行
循环依赖时为什么 import 的值是 undefined 而不是报错
ES 模块的加载分三步：解析 → 实例化 → 求值。循环依赖会卡在实例化阶段，export 绑定已建立，但值还没被赋上——所以读出来是 undefined，而不是抛异常。
典型表现：页面白屏、Console 无报错、Network 面板里 JS 请求都 200 了，但脚本就是不执行。
- 检查方法：在 Console 手动运行
import('./a.js')，如果 Promise 一直pending，基本就是循环 -
import()动态导入也绕不过去，它同样依赖模块图 - 临时删掉某个
import，页面恢复了，就坐实了循环 - 唯一解法是抽离共用逻辑到第三个模块，切断闭环
本地双击打开 HTML 时 type="module" 为什么连请求都不发
这不是路径错，也不是代码错，是浏览器主动拦截：file:// 协议下 origin 是 null，而模块加载默认以 mode: 'cors' 发起 fetch，CORS 规范禁止从 null 源发起请求。
结果就是控制台只有一条冷冰冰的：Access to script at 'file:///xxx.js' from origin 'null' has been blocked by CORS policy.
- 开发阶段必须起本地服务，比如
npx serve、python -m http.server或 Vite/webpack dev server -
modulepreload同样受此限制，file://下完全无效 - 跨域模块（如 CDN）还得多加
crossorigin属性，否则静默失败
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
