type="module"是执行环境切换而非开关，启用后脚本按es模块规则运行：import/export仅在模块上下文中合法，file://协议下完全失效，必须通过http服务（如npx serve）运行。
type="module"不是开关，是执行环境切换
加 type="module" 不是“打开模块功能”，而是告诉浏览器：“用 ES 模块加载器来运行这段脚本”。一旦启用，整个执行规则重置：import 和 export 只能在模块上下文中合法；非模块脚本里写 import，必然报 Cannot use import statement outside a module。
常见误判：
- 写了
<script type="module">import './a.js'</script>，但 HTML 是双击打开的（file://协议）→ 控制台静默无请求，只报 CORS 错误 - 外部脚本
src="main.js"里有import，但加载它的<script src="main.js"></script>没写type="module"→ 错误仍在main.js第一行抛出 - 内联 script 同时带
src和内容：<script type="module" src="main.js">console.log(1)</script>→ 内联内容被完全忽略
路径必须显式、精确，不补后缀也不猜相对位置
ES 模块路径解析是静态且严格的。浏览器不会帮你补 .js，也不会把 utils 当成 utils.js；所有相对导入必须以 ./ 或 ../ 开头，并带扩展名；绝对路径以 / 开头，从站点根目录算起。
正确写法示例：
-
import { foo } from './utils.js'✅（当前模块同目录） -
import mod from '/src/lib.js'✅（根目录下）
错误写法：
-
import _ from 'lodash'❌（裸导入，原生不支持，除非配<script type="importmap"></script>） -
import { bar } from 'utils.js'❌（缺前缀，被当裸路径，直接SyntaxError） -
import { a } from './a'❌（没扩展名，Chrome/Firefox/Safari 均拒绝）
大小写和拼写也参与匹配：Linux/macOS 下 Utils.js ≠ utils.js，错一个字符就 Failed to resolve module specifier。
多个 type="module" 脚本默认不共享变量
每个 <script type="module" src="a.js"></script> 和 <script type="module" src="b.js"></script> 是独立模块作用域。你在 a.js 里写 const api = 'https://api.example.com'，b.js 里直接访问 api 就是 ReferenceError——这不是 bug，是设计。
要复用逻辑，必须走标准导出/导入流程：
-
a.js中export const api = 'https://api.example.com' -
b.js中import { api } from './a.js'
不能靠 window.api = 或 IIFE 挂全局——模块顶层声明不会上挂 window。如果老项目大量依赖全局变量，别硬塞进 type="module"，先封装导出，再统一重构导入链。
本地开发必须跑 HTTP 服务，file:// 协议下 import 必败
这是硬性限制，不是配置问题。Chrome、Firefox、Safari 在 file:// 下直接禁用所有模块加载逻辑——控制台可能只显示笼统的 CORS 错误，甚至无任何日志。双击打开 HTML 文件？立刻失败。
必须用 HTTP 服务启动，例如：
-
npx serve（需 Node） -
python3 -m http.server 8000（Python 自带） - VS Code Live Server 插件
跨域模块（比如 CDN 上的 https://cdn.jsdelivr.net/npm/lodash-es@4/index.js）必须返回 Access-Control-Allow-Origin: *，否则报 CORS error。普通 <script src="xxx"></script> 在 file:// 下能跑，容易让人误以为“只是模块写错了”。
最常被忽略的点：模块路径解析基于**当前模块文件 URL**，不是 HTML 文件位置。比如 index.html 引入 main.js，而 main.js 里写 import './utils.js'，这个 ./utils.js 是从 main.js 所在目录找，不是从 index.html 所在目录。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
