这是浏览器对file://协议的CORS安全拦截，因origin为null导致ES模块加载失败；唯一稳定解法是改用HTTP服务，如VS Code的Live Server插件、npx http-server或Vite开发服务器。

直接用 file:// 协议打开含 <script type="module"> 的 HTML 文件，浏览器会报 “Access to script at 'file:///' from origin 'null' has been blocked” 错误。这不是代码写错了，而是浏览器主动拦截——file:// 没有合法的 origin，模块加载默认走 CORS 流程，而 CORS 要求 origin 可识别（如 http://localhost:5173）。唯一稳定、通用、无需改代码的解法，就是把本地文件换成 HTTP 服务访问。

用 Live Server 插件快速启动（推荐新手）

VS Code 用户装好 Live Server 插件后，右键 HTML 文件 → “Open with Live Server”，它会自动： - 启动一个轻量 HTTP 服务器（默认端口 5500） - 用 http://127.0.0.1:5500/xxx.html 打开页面 - 所有 import、export、静态资源路径都按相对位置正常解析 - 支持热重载，改完保存即刷新，不用手动刷新页面

用 npx 临时起服务（无需全局安装）

终端进入项目根目录，执行任意一条即可，都不用提前装依赖： - npx http-server -c-1（推荐，支持 CORS，-c-1 禁用缓存） - npx serve -s（来自 serve 包，简洁易用） - npx anywhere（极简风格，端口 8000，适合纯静态页） 所有命令都会输出可点击的本地地址，复制进浏览器即可，关掉终端就停止服务，零配置。

用 Vite 开发服务器（适合现代前端项目）

如果你的项目已用 Vite 构建或打算长期维护： - 确保项目有 vite.config.js 或 vite.config.ts - 运行 npx vite（开发模式），默认地址是 http://localhost:5173 - 它原生支持 ES 模块、HMR、环境变量，且对 import 路径做了自动解析和代理优化 - 若需打包后也支持本地双击打开，可加插件 @vitejs/plugin-legacy 生成兼容脚本备用

为什么不用 --allow-file-access-from-files 参数？

该 Chrome 启动参数在新版浏览器中已被废弃或失效： - Edge/Chrome 94+ 已彻底移除对该参数的支持 - 即使旧版本生效，也需要每次手动带参启动浏览器，无法用于调试 iframe、Service Worker 等场景 - 它绕过的是部分限制，但不解决 origin === 'null' 导致的模块加载失败本质问题 - 属于临时 hack，不符合开发规范，也不被 CI/CD 或团队协作接受