type="module" 是执行环境切换而非功能开关，它强制启用es模块加载器，要求显式路径、作用域隔离、严格模式及http服务运行，不兼容传统脚本行为。
type="module"不是开关，是执行环境切换
加 type="module" 不是“启用模块功能”，而是告诉浏览器：“用 ES 模块加载器来执行这段脚本”，整个执行规则立刻重置。它不兼容传统脚本行为——import 和 export 在非模块上下文中语法非法，Cannot use import statement outside a module 这个错误只说明一件事：你写了 import，但脚本没被当成模块运行。
常见误判点：
- 写了
<script type="module">import './a.js'</script>，但没配 HTTP 服务 → 控制台静默无请求，只报 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）
大小写和拼写也参与匹配：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，是设计。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
要复用逻辑，必须走标准导出/导入流程：
- 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:// 下的模块导入，控制台只显示 Cross-Origin Request Blocked 或空错误，连网络请求都不发。
最小可行启动方式（任选其一）：
-
npx serve（需 Node.js，推荐） -
python3 -m http.server 8000（Python 自带，无需额外安装） - VS Code 安装 Live Server 插件，右键 HTML 文件 → “Open with Live Server”
别双击打开 HTML 文件测试模块功能——那根本不是开发流程，只是在验证失败。
真正容易被忽略的点是：模块路径解析始终相对于当前模块文件 URL，不是 HTML 文件位置。比如 index.html 在根目录，引入 src/main.js，而 main.js 里写 import { x } from './utils.js'，这个 ./utils.js 是从 src/ 目录找，不是从根目录。路径错一层，就找不到文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
