网页打不开的常见原因是本地html文件未通过http服务加载，导致file://协议下fetch、import等操作被安全策略阻止；应使用python3 -m http.server或live server启动本地服务，并检查network面板中的404请求和cors错误。
网页打不开，先别急着重装浏览器或怀疑网络——90% 的情况是本地 HTML 文件没被正确加载，或者代码里有硬编码路径、协议限制这类“静默故障”。
用 file:// 协议直接双击打开时空白或报错
这是最常见也最容易被忽略的问题。浏览器出于安全策略，会禁止 file:// 协议下执行某些操作，比如：fetch() 请求本地 JSON、读取 ./data/ 下的文件、甚至部分 import 语句。
- 现象：控制台报
Access to script at 'file:///xxx.js' from origin 'null' has been blocked或Failed to fetch - 解决办法：必须起一个本地 HTTP 服务，而不是双击打开。用命令行跑
python3 -m http.server 8000（Python 3）或npx http-server（需 Node.js），然后访问http://localhost:8000/index.html - 注意：VS Code 的 Live Server 插件默认也是起
http://服务，但如果你手动右键“Open with Live Server”却仍打不开，检查右下角状态栏是否显示真实端口地址，有时它会因端口占用自动换到:5501等
页面加载了但内容为空，控制台没报错
HTML 渲染了，DOM 结构存在，但你看不见文字、图片或组件——大概率是路径写错了，尤其是 src、href、import 这些属性里的相对路径。
- 典型错误：
<img src="images/logo.png">，但实际文件在./assets/images/logo.png；或 ES 模块里写import { foo } from './utils.js'，而utils.js其实放在./src/utils.js - 验证方法：右键 → “检查”，切到 Network 标签页，刷新页面，看哪些资源状态码是
404，点开就能看到浏览器尝试请求的真实路径 - 小技巧：所有静态资源路径尽量以
/开头（如/assets/js/app.js），配合服务器根目录配置，避免相对路径嵌套过深导致错乱
Chrome / Edge 打开提示“已阻止不安全脚本”或 CORS 错误
这通常发生在你用了 http:// 页面却试图加载 https:// 资源（混合内容），或反过来；更常见的是开发时调后端 API，后端没配 CORS 响应头。
- 现象：
Mixed Content: The page at 'http://localhost:8000/' was loaded over HTTP, but requested an insecure script 'http://api.example.com/data' - 临时绕过（仅开发）：Chrome 启动时加参数
--unsafely-treat-insecure-origin-as-secure="http://localhost:8000" --user-data-dir=/tmp/chrome-test，但不如直接统一用 HTTPS 或配好后端 CORS - 根本解法：后端响应头加上
Access-Control-Allow-Origin: *（开发环境），生产环境建议指定域名；前端避免在http页面发https请求
真正卡住人的往往不是语法错误，而是路径、协议、权限这三者交叉产生的“看不见的断点”。每次打不开，先开 Network 面板看 404 和状态码，比翻十遍 HTML 源码更有效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
