🎯 一、file: 协议是什么？

🔥 一句话定义：
file: 协议是一种 URL 格式，用来指向你本地硬盘上的文件，就像文件资源管理器的路径一样。

📁 二、基本语法

1
2
3
4
file:[//<host>]<path>
     └──┬───┘ └──┬──┘
        │       └── 路径（必须）
        └───────── 主机名（可选）

常见形式

格式 说明 示例
file:///路径 本地文件（最常见） file:///C:/Users/Alice/docs/hello.txt
file://主机名/路径 网络共享文件（少见） file://server/shared/report.pdf

✅ 三个斜杠 ///：前两个是 语法中的://，第三个表示“根目录”

🌰 三、实际例子

1. 打开本地 HTML 文件

1
file:///Users/Alice/project/index.html

👉 在浏览器地址栏输入，就能打开你电脑上的 index.html

2. 引用本地图片

1
<img src="file:///Users/Alice/Pictures/photo.jpg" />

3. Node.js 中使用

1
2
const url = "file:///Users/Alice/data.json";
require("fs").readFileSync(url.slice(7)); // 去掉 file://

🧩 四、和普通路径的区别

类型 示例 说明
普通文件路径 C:\Users\Alice\file.txt 操作系统用
file: URL file:///C:/Users/Alice/file.txt 浏览器/程序用的标准格式
相对路径 ./docs/file.txt 相对于当前目录

✅ file: 是 跨平台的标准 URL 格式

🔐 五、浏览器中的安全限制 ⚠️

虽然你可以用 file: 打开本地文件，但现代浏览器有严格限制：

❌ 不能做什么？

操作 是否允许 说明
file:/// 页面加载 file:/// 脚本 ❌ 通常禁止 安全策略
file:/// 页面发起 AJAX 请求 ❌ 禁止 不能读本地文件
file:/// 页面使用 import 加载本地模块 ❌ 大多数浏览器禁止 CORS 限制

✅ 能做什么？

  • 直接打开 file:///index.html 查看静态页面
  • 页面引用同目录的图片、CSS（有时允许）
  • 本地测试简单 HTML（无 JS 交互）

🛠️ 六、实际用途

1. ✅ 快速预览 HTML 文件

  • 双击 .html 文件 → 浏览器用 file:// 打开
  • 适合静态页面原型演示

2. ✅ Electron / 桌面应用

  • Electron 应用可以用 file: 加载本地资源
  • 因为它有更高权限

3. ✅ VS Code 预览

  • VS Code 的 “Open in Browser” 插件会用 file: 协议

4. ✅ 本地文档查看

  • 本地 Markdown 生成的 HTML 文档

🚫 七、不适合做什么？

场景 为什么不行
Web 开发调试 会有 CORS、模块加载等问题
使用 npm 包 无法解析 node_modules
AJAX 请求本地文件 浏览器禁止
使用 import 模块 需要服务器支持

👉 开发时建议用本地服务器：

1
npx serve  # 或 python -m http.server

🔄 八、和其他协议对比

协议 示例 用途
http:// http://example.com 网站（明文）
https:// https://google.com 网站（加密）
file:// file:///C:/doc.txt 本地文件
data: data:text/plain,Hello 内联数据
blob: blob:https://... 二进制大对象

✅ 九、总结

  • ✅ file: 协议 = 访问本地文件的 URL 方式
  • ✅ 格式：file:///路径（三个斜杠）
  • ⚠️ 浏览器有安全限制，不能用于复杂 Web 开发
  • ✅ 适合：预览静态页面、本地文档、桌面应用
  • 🚫 不适合：开发调试（建议用 http://localhost）

💡 小技巧

想在浏览器打开本地文件？
把文件拖到浏览器标签页，地址栏就会显示 file://...！