一、file 协议与 http 协议的区别
在本地开发前端页面时，我们通常有两种方式打开一个 HTML 文件：
一种是直接在浏览器中双击 HTML 文件，浏览器会以 file 协议加载页面；另一种是将文件托管到一个本地静态服务器，通过 http 协议访问。
尽管两者都能看到页面内容，但它们之间存在本质区别。
1.1 协议差异
-
file 协议
file 协议是浏览器直接访问本地文件系统的一种方式，其地址通常以 file:/// 开头。访问的是本机的真实硬盘路径，没有网络请求过程。浏览器对 file 协议有非常严格的安全策略，例如禁止跨目录访问、限制相对路径脚本加载等。
-
http 协议
http 协议是通过服务器提供文件的方式访问页面。浏览器向服务器发起请求，服务器返回静态资源（HTML、JS、CSS 等）。浏览器对 http 的访问方式是标准的 Web 加载模型，路径解析、跨域规则、静态资源加载行为都符合普遍的 Web 规范。
1.2 浏览器安全限制
因为 file 协议直接访问用户本地文件系统，如果浏览器像访问 http 网站那样随意读取资源，会造成严重的安全隐患。为此浏览器对 file 协议进行了诸多限制：
-
相对路径资源可能无法访问
-
不同层级目录经常被视为不同源，造成跨域问题
-
JS、图片、字体等资源在 file 下经常出现加载失败
-
路径中出现中文或被 URL 编码的目录时问题更明显
因此，虽然 file 能看到 HTML 的内容，但不适合作为前端项目的运行环境。
二、file 协议下 test.html 不能使用相对路径加载 test.js 的原因
例如目录如下：
/测试文件/
test.html
test.js在 test.html 中写：
<script src="./test.js"></script>如果直接通过 file:///Users/.../测试文件/test.html 打开文件，浏览器通常会出现以下情况：
-
相对路径解析失败
-
浏览器拦截 file → file 的本地跨域访问
-
test.js 资源被阻止加载
-
中文目录被 URL 编码后路径出现不兼容情况
这导致 test.html 虽然能显示，但脚本无法执行。
但是可以通过 file 协议的绝对路径引入 <script src="./test.js"></script>
js
<script src="file://....../test.js"></script>三、解决方案：使用 npx serve 启动本地静态服务器
解决 file 协议问题的最佳方式是使用一个轻量级静态服务器，例如 serve。
只需进入目录并执行：
npx serve浏览器通过如下地址访问：
http://localhost:3000/test.html此时页面运行在 http 协议下，所有相对路径加载都会恢复正常，包括：
-
./test.js
-
./style.css
-
./images
-
甚至中文目录也可以正常访问
这是目前最简洁、最可靠的解决方案。
四、特别说明：npx serve -s 仅适用于 index.html
很多教程会提到：
npx serve -s .但需要特别强调的是：
serve 的 -s 或 --single 选项仅适用于单页应用（SPA），并且必须存在 index.html 文件。
在 SPA 模式下：
-
所有路径都会 fallback 到 index.html
-
所以访问任意地址都返回 index.html
-
这是为了支持前端路由 history 模式的特性
但是如果你的入口不是 index.html，例如：
test.html
particles.html
demo.html那么：
npx serve -s .不会按预期工作，反而可能导致路径混乱、JS 加载失败或页面空白。
因此对于普通静态文件访问，应直接使用：
npx serve .或仅：
npx serve让服务器保持标准静态文件模式。
五、总结
-
file 协议会受到严格的浏览器安全限制，相对路径资源在许多情况下无法正常加载。
-
使用 file 协议打开 test.html 时无法使用 ./test.js 是正常现象。
-
使用 npx serve 可以将本地文件变成标准的 http 服务，从而完全解决资源无法加载的问题。
-
需要注意的是，npx serve -s 仅在项目存在 index.html 时有效，主要用于单页应用，不适用于普通静态页面。
如果你需要，我可以帮你进一步撰写一篇适合发布到掘金的完整文章版本。