Edge打开index.html需确保资源路径为同级或子目录，避免../，优先用./开头；双击可能调用旧版EdgeHTML，右键“在Edge中打开”则用Chromium内核，默认禁用file://下fetch/XHR；调试应启用本地HTTP服务（如Live Server），而非依赖file://协议。
Edge 打开 index.html 文件的正确路径写法
直接双击或用 Edge 打开 index.html 文件时，如果页面空白、资源加载失败或控制台报 net::ERR_FILE_NOT_FOUND，大概率是路径问题——特别是文件里用了相对路径引用 CSS/JS 图片等资源。
Edge（基于 Chromium）对 file:// 协议的资源加载比 Chrome 更严格，默认禁止跨目录读取（比如 ../css/style.css），也拒绝从本地 HTML 加载某些类型资源（如 fetch() 读取同目录 JSON）。
- 确保所有资源路径为**同级或子目录**，避免
../回退； - 用绝对路径写法：
./css/style.css比css/style.css更稳妥（部分 Edge 版本对省略./解析不一致）； - 图片、字体等二进制资源若仍 404，检查文件名大小写——Windows 文件系统不区分，但 Edge 的
file://加载器会校验大小写匹配。
为什么双击打开和右键“在 Edge 中打开”行为不同
双击通常触发系统默认方式，可能走旧版 Edge（EdgeHTML）引擎；而右键菜单里的“在 Microsoft Edge 中打开”一般调用新版 Chromium 内核。两者对 file:// 的安全策略差异明显：
- 旧版 Edge（已停更）允许更多本地资源访问，但不支持现代 API（如
import.meta.url）； - 新版 Edge 默认启用
web-security，禁止XMLHttpRequest或fetch()读取本地文件（哪怕同目录）； - 若需调试 AJAX 加载本地数据，必须启动本地服务，不能依赖
file://。
不启服务器也能绕过限制的临时方案
仅限开发调试，不可用于交付。以下方法能快速验证 HTML 渲染是否正常：
立即学习“前端免费学习笔记（深入）”；
- 启动简易 HTTP 服务：
npx http-server（需 Node.js），然后访问http://localhost:8080； - 用 VS Code 插件 Live Server（点击右下角 Go Live），它自动起服务并禁用 web-security；
- 命令行强制关闭安全策略（仅 Windows 测试用）：
start msedge --user-data-dir="C:/temp" --disable-web-security --allow-file-access-from-files "file:///D:/project/index.html"
注意：该模式下所有网页都失去沙箱保护，退出后删掉C:/temp目录。
常见错误信息对应排查点
看到这些提示时，别急着改代码，先看地址栏协议和控制台来源：
-
Failed to load resource: net::ERR_FILE_NOT_FOUND→ 路径错或文件名大小写不符； -
Access to script at 'file:///...' from origin 'null' has been blocked→ 新版 Edge 拦截了file://下的跨源请求，必须换 HTTP 服务； - 页面显示 HTML 源码而非渲染结果 → 文件扩展名其实是
index.html.txt（Windows 隐藏扩展名导致），重命名为纯index.html； - 控制台报
Uncaught SyntaxError: Cannot use import statement outside a module→ 用了 ES Module 但没加type="module"属性，或脚本路径未通过 HTTP 提供。
file:// 方式只是最低限度预览，真正涉及路径、API、模块化，就得接受“必须起服务”这个事实。很多人卡在第一步，不是不会写 HTML，而是没意识到浏览器对本地文件的限制已经比十年前严格得多。 
