直接双击打开 index.html 会因浏览器安全策略禁用 fetch、ES 模块等现代 Web 功能，必须通过 http://localhost:xxxx 启动本地服务器；推荐 python -m http.server 8000 快速验证，或 npx serve -s 支持 SPA 路由回退。
为什么直接双击打开 index.html 会出问题
浏览器直接用 file:// 协议打开 HTML 文件时，很多现代 Web 功能会被禁用：比如 fetch() 请求本地 JSON、import ES 模块、Service Worker、甚至某些 CSS 的 @import 跨目录加载。这不是你代码写错了，是浏览器安全策略卡的。
常见错误现象：net::ERR_FILE_NOT_FOUND（尤其请求 ./data.json 时）、Failed to resolve module specifier、控制台报 Cross origin requests are only supported for protocol schemes。
- 开发阶段必须走
http://localhost:xxxx，哪怕只是静态页面 - 不需要装完整 Web 服务器（如 Nginx、Apache），命令行一行就能起
- 不同语言/工具起的服务行为有差异，选错容易踩坑
用 python -m http.server 最快启动（推荐新手）
Python 3 自带，不用额外安装，适合快速验证页面结构和基础交互。
在终端进入你的 HTML 所在目录，运行：
python -m http.server 8000
然后访问 http://localhost:8000 —— 注意不是 http://localhost:8000/index.html，根路径自动映射到 index.html（如果存在）。
- 端口可换，比如
8080，但要避开已被占用的（如 Chrome 可能占8080） - 不支持 HTTPS，也不处理
history.pushState路由（刷新 404），纯静态够用 - Python 2 用户请用
python -m SimpleHTTPServer 8000，但别用 Python 2，兼容性差
用 npx serve 支持 SPA 路由回退（React/Vue 项目必备）
如果你用 create-react-app、vite 或手写前端路由，刷新页面 404 是典型症状——因为服务没把所有路径都 fallback 到 index.html。
npx serve 默认开启 SPA 支持：
npx serve -s
它会监听 http://localhost:5000，且所有未命中文件的请求都返回 index.html，让前端路由接管。
-
-s表示 “single-page application” 模式，必须加 - 不依赖全局安装，每次执行都是最新版，适合多项目混用
- 比
http-server更轻量，没多余配置项，不容易配错
Chrome 浏览器里 localhost 打不开？先关掉这些
不是代码问题，是本地环境干扰：
- 检查是否开了代理（比如 Clash、Surge），它们常劫持
localhost流量，关掉再试 - 确认没在 Chrome 启动参数里加
--unsafely-treat-insecure-origin-as-secure这类调试选项 - 某些杀毒软件（尤其是国内全家桶）会注入本地 DNS 或 HTTP 拦截，临时禁用试试
- Mac 用户注意：如果用了
brew services start nginx，可能 80 端口被占，换端口或停掉
最简单的验证方式：在终端跑 curl -I http://localhost:8000，有 HTTP/1.1 200 OK 就说明服务起来了，问题一定出在浏览器侧。
真正麻烦的从来不是“怎么起服务”，而是起完发现浏览器不认、请求被拦、路径 404 —— 这些地方没日志、不报错，只能靠排除法一点点筛。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
