解压后 index.html 空白主因是 file:// 协议被浏览器安全限制；中文乱码源于 unzip 默认 UTF-8 解码 GBK 文件名；JS 报 require 未定义说明需构建后 dist 目录或本地服务运行；tar.gz 需用 tar 或 7-Zip 解压。
解压后打开 index.html 一片空白？先看浏览器地址栏
本地直接双击打开 HTML 压缩包解压后的 index.html，浏览器地址栏显示的是 file:/// 路径——这是绝大多数“空白页”问题的根源。现代浏览器出于安全限制，会阻止 file:// 协议下加载本地 JSON、XMLHttpRequest、fetch 请求，或某些依赖相对路径的 CSS/JS 资源。
实操建议：
- 用轻量 HTTP 服务代替双击：VS Code 安装
Live Server插件，右键index.html→ “Open with Live Server”；或终端进入解压目录，运行npx http-server（需 Node.js） - 确认所有资源路径是相对路径，不是绝对路径（如避免
/css/style.css，应为css/style.css） - 打开浏览器开发者工具（F12），切到
Console和Network标签页，看是否有404或CORS报错
unzip 解压中文文件名乱码？Linux/macOS 下常见
很多 HTML 压缩包由 Windows 打包，使用 GBK 或 GB2312 编码记录文件名，而 unzip 默认按 UTF-8 解码，导致中文文件夹/文件名变成 .html 这类乱码，进而引发路径引用失败。
实操建议：
- macOS：用
unar替代unzip—— 先brew install unar，再运行unar your-project.zip - Linux：用
7z x your-project.zip（需安装p7zip），它对编码兼容性更好 - Windows 用户反而基本无此问题，但若用 WSL 解压，务必注意默认编码行为
解压后 JS 报错 ReferenceError: require is not defined？说明用了模块打包器
这不是 HTML 本身的问题，而是压缩包里实际是 Webpack/Vite 等构建后的产物，但漏掉了运行时依赖（比如没传 dist 目录，传了 src 或根目录）。直接打开 index.html 会因缺少 bundle.js 或模块系统报错。
实操建议：
- 检查解压目录是否存在
dist/、build/或public/子目录，优先打开其中的index.html - 查看有无
package.json：若有，大概率需npm install && npm run dev启动开发服务器，不能直接双击 - 若只有单个
index.html但内联了大量 JS，搜索页面源码中是否含require(、import.meta、__webpack_require__等关键词，确认是否误把构建前代码当成品发出来了
用 gzip 或 .tar.gz 压缩的 HTML 项目怎么解？别硬套 ZIP 流程
有些发布者用 tar -czf 打包，扩展名可能是 .tar.gz 或简写为 .gz，但内容并非 ZIP 格式。用常规解压软件强行打开可能只看到一个损坏的 archive 文件，或解出一堆乱码二进制。
实操建议：
- Linux/macOS 终端：用
tar -xzf project.tar.gz（不是unzip） - Windows：用 7-Zip（非系统自带解压工具），它能自动识别 tar/gz 格式；WinRAR 也支持，但需手动选“解压到”而非双击浏览
- 验证是否成功：解压后第一层目录应有明确结构（如含
index.html、css/、js/），而不是单个同名的.tar文件
路径和编码问题比功能逻辑更常卡住人，尤其跨平台传递时——别急着改代码，先盯住控制台报错和地址栏协议。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
