不能直接用 file:// 协议打开 html 是因现代浏览器对其施加严格安全限制，导致 ajax、模块导入、localstorage 等功能被拦截；必须通过 http 协议（如 http-server）启动本地服务才能正常运行。
直接用浏览器双击打开 index.html 会遇到跨域、资源加载失败、AJAX 被拦截等问题，根本跑不起来带 JS/CSS/图片的页面——必须走 HTTP 协议，http-server 是最省事的解法。
为什么不能直接用 file:// 协议打开 HTML？
现代浏览器对 file:// 协议做了严格限制：XMLHttpRequest、fetch、localStorage（部分场景）、import 模块、甚至某些 CSS 的 @import 都会被拒绝。这不是 bug，是安全策略。哪怕你只改了一行 JS，也得手动刷新 + 清缓存才能看到效果，效率极低。
常见错误现象包括：
Access to script at 'file:///xxx.js' from origin 'null' has been blocked by CORS policyFailed to load module script: Expected a JavaScript module script but the server responded with a MIME type of ''- CSS 或图片路径显示 404，但文件明明存在
用 http-server 快速启动本地服务
它基于 Node.js，零配置、单命令、支持热更新提示，适合日常调试。前提是已安装 Node.js（node -v 能输出版本号）。
操作步骤：
- 在项目根目录打开终端，执行
npm install -g http-server（只需一次） - 进入含
index.html的目录，运行http-server -p 8080 -c-1（-c-1禁用缓存，避免改了 HTML 看不到效果） - 浏览器访问
http://localhost:8080，即可正常加载所有静态资源
注意：http-server 默认把当前目录作为根路径，所以 ./css/style.css 会从 http://localhost:8080/css/style.css 加载；如果页面里用了相对路径，就别 cd 错目录。
详细的 Three.js 3D 图形参考，涵盖场景设置、相机、几何体、材质、光照、动画、控制器、加载器、数学工具和调试。
不用全局安装？用 npx 临时跑一次
不想污染全局 npm 包，或只是临时测一个页面，直接用 npx 更干净：
- 确保项目目录下有
package.json（没有就npm init -y一下） - 运行
npx http-server -p 5500，它会自动下载并执行，不写入全局 node_modules - 关掉终端后，所有依赖自动清理，无残留
这个方式特别适合：给同事发一个 ZIP 包，附上一行命令就能立刻跑起来，不依赖对方是否装过 http-server。
自己写 http 模块服务器？仅限调试特定路径逻辑
除非你要拦截某个路径（比如模拟 /api/user 返回假数据），否则真没必要手写。但如果你确实需要最小依赖、不装任何包，可以这样：
const http = require('http');
const fs = require('fs');
const path = require('path');
http.createServer((req, res) => {
const url = req.url === '/' ? '/index.html' : req.url;
const filePath = path.join(__dirname, url);
fs.readFile(filePath, (err, data) => {
if (err) {
res.writeHead(404, { 'Content-Type': 'text/plain' });
res.end('Not found');
return;
}
const ext = path.extname(filePath);
const mimeTypes = {
'.html': 'text/html',
'.css': 'text/css',
'.js': 'application/javascript',
'.png': 'image/png',
'.jpg': 'image/jpeg'
};
res.writeHead(200, { 'Content-Type': mimeTypes[ext] || 'text/plain' });
res.end(data);
});
}).listen(3000);
这段代码没处理重定向、没做缓存控制、不支持目录列表、404 时不会 fallback 到 index.html（SPA 路由会挂），但它能让你看清底层怎么把文件映射到 HTTP 响应——仅建议用于理解原理或极端受限环境。
真正容易被忽略的是：不同工具对路径解析行为不一致。比如 http-server 默认把 /foo 当作 /foo.html 尝试，而手写服务器默认不这么做；又比如某些构建工具生成的 dist 目录结构嵌套深，一不小心就 cd 错了目录，导致 404 却以为是代码问题。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
