直接双击index.html会因浏览器file://协议限制导致fetch、import等现代前端功能失效；必须通过本地http服务（如live server、npx serve或python http.server）在http://协议下运行。
直接双击 index.html 能打开，但绝大多数现代前端功能会立即失效——这不是你代码的问题，是浏览器对 file:// 协议的硬性限制。
为什么双击打开后 fetch、import 会报错
Chrome、Edge、Firefox 默认禁止从 file:// 协议发起 fetch() 请求或加载 ES 模块，错误典型如：Failed to load resource: net::ERR_FAILED 或 Access to script at 'file://' is denied。这是因为跨域策略把本地文件系统视为不可信来源，连读取同目录下的 data.json 都不被允许。
- Service Worker 完全无法注册
-
import './utils.js'会触发 CORS 错误（即使路径正确） - Vue/React/Vite 等工具链的热更新、HMR、模块解析全部瘫痪
开发时必须用本地 HTTP 服务的三种可靠方式
真实开发环境必须模拟 http:// 协议，以下方法均绕过 file:// 限制，且无需配置：
- VS Code 用户：装
Live Server插件，右键index.html→Open with Live Server，自动在http://localhost:5500启动 - 终端有 Node.js：进项目目录后运行
npx serve（轻量）或npx http-server（支持 CORS 配置） - 没装 Node.js：用 Python（系统自带概率高）
python -m http.server 8000，然后访问http://localhost:8000/index.html
Apache/Nginx 部署后打不开？先查这三处
路径明明放对了，http://localhost/ 却 403 或 404，大概率卡在这几个地方：
-
DocumentRoot配置是否指向D:\sjksh-apache\apache\htdocs（Windows）或/var/www/html（Linux）？别只看文件位置，要核对配置文件里的实际路径 - Apache 是否监听
80端口？被 Skype、IIS、WSL2 占用很常见；改Listen 8080后记得访问http://localhost:8080/ - 文件名大小写敏感：服务器上叫
Index.html，但 HTML 里写src="js/main.js"，而实际文件是JS/main.js→ 404
最容易被忽略的是：所有相对路径（./css/style.css、../api/data.json）在本地服务下按服务器根目录解析，但双击打开时按文件系统当前目录解析——同一行代码，行为完全不同。调试前先确认你用的是哪种打开方式，否则花半天时间改 JS，其实问题出在启动方式上。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
