HTML文件不能直接“运行”是因为它不是可执行程序，无main函数或编译过程；所谓运行实为浏览器加载file://路径并渲染，而现代浏览器对file://协议施加严格限制，导致AJAX、localStorage、模块导入等功能被拦截。
为什么不能直接“运行”HTML文件
HTML 本身不是可执行程序，没有 main() 函数或编译过程。所谓“运行”，本质是让浏览器加载并渲染本地文件。编辑器（如 EditPlus、VS Code、IntelliJ IDEA）不内置渲染引擎，必须调用系统已安装的浏览器进程，把 file:// 路径传过去。漏掉路径变量或写错变量名，就会打开空白页或报错 ERR_FILE_NOT_FOUND。
EditPlus 配置外部浏览器工具的关键参数
EditPlus 的“用户工具”依赖三个核心变量，缺一不可：
-
$(FilePath)：必须填在“参数”栏，表示当前文件的绝对路径（含盘符和扩展名），例如C:\dev\index.html -
$(FileDir)：必须填在“初始目录”栏，确保浏览器以该目录为根解析相对路径（比如./style.css） - “命令”栏可留空——留空时会调用系统默认浏览器；若填了具体路径（如
C:\Program Files\Google\Chrome\Application\chrome.exe），则强制使用该浏览器
常见错误：把 $(FilePath) 错写成 $FilePath（少一个括号）、或误用 $(FullName)（EditPlus 不支持这个变量）。
VS 和 IDEA 中的变量命名差异
不同编辑器对路径变量的写法不统一，硬套会失败：
立即学习“前端免费学习笔记（深入）”；
- IntelliJ IDEA / WebStorm 使用
$FilePath$（前后两个美元符号） - Visual Studio（2019/2022）使用
$(ItemPath)或$(FullPath)，不能用$(FilePath) - EditPlus 只认
$(FilePath)，其他写法全无效
如果配置后浏览器打开但页面空白，先检查地址栏——是否显示 file:///C:/.../index.html？如果是 file:///index.html（路径丢失），说明变量没被正确替换，大概率是拼写错误或编辑器版本不支持该变量。
不启动服务器时的资源加载限制
直接双击或通过外部工具打开 HTML 文件，浏览器走的是 file:// 协议，这会触发严格的安全策略：
- AJAX 请求（
fetch('./data.json')）会被拒绝，报CORS policy: No 'Access-Control-Allow-Origin' header - 某些现代 API（如
localStorage在部分 Chrome 版本中）可能受限 - 相对路径引用的图片、CSS、JS 若不在同一目录或子目录下，容易 404
这时候别急着改编辑器配置——真正该做的是启动一个本地 HTTP 服务（比如 VS Code 的 Live Server 插件，或命令行跑 npx http-server）。外部工具只解决“预览”，不解决“开发环境一致性”。
