先判断乱码是浏览器端还是服务端问题：仅当前浏览器异常则清理缓存、停用扩展；所有设备都乱码则检查服务器响应头content-type、html文件编码及meta charset声明是否一致且无bom。
确认乱码是浏览器端还是服务端问题
先别改代码。打开同一页面，用 Chrome 无痕窗口、Firefox 正常窗口、手机 Safari 各试一次。如果只有当前浏览器异常，问题大概率在缓存、扩展或本地设置；如果所有环境都乱码，说明源头（HTML 文件、服务器响应、数据库）已出问题。
关键判断依据：Ctrl+U 查看网页源代码：如果源码里中文是“中”“文”，但页面显示“ä¸Âæ–—这类字符，就是编码被误读；如果源码里已经是“”或问号，说明原始字节已被破坏，无法仅靠切换编码恢复。
- 无痕窗口正常 → 清理当前网站的缓存和 Cookie，停用翻译/美化类扩展
- 所有设备都乱码 → 跳到下一步检查 HTTP 响应头和文件编码
- 只有部分字段（如评论、用户昵称）乱码 → 单独抓取对应接口，检查
Content-Type和返回 JSON 的实际编码
检查 HTTP 响应头中的 Content-Type
打开开发者工具 → Network → 刷新页面 → 点击 HTML 请求 → 查看 Response Headers 中的 Content-Type。它必须明确包含 charset=utf-8（大小写不敏感，但不能是 utf8 或 UTF8）。
常见错误：Content-Type: text/html; charset=gbk 与页面内 <meta charset="UTF-8"> 冲突；Content-Type 根本没带 charset 参数；或值为 us-ascii 这类不支持中文的编码。
- Nginx 配置要加
charset utf-8;（在 http/server/location 块内） - Apache 要确保
AddDefaultCharset UTF-8生效，且没被AddDefaultCharset GBK覆盖 - Node.js/Express 必须在
res.send()前调用res.set("Content-Type", "text/html; charset=utf-8") - PHP 必须在任何输出前调用
header("Content-Type: text/html; charset=utf-8")，且不能有 BOM 或空格
验证 HTML 文件本身的编码和 <meta charset> 位置
<meta charset="UTF-8"> 不是万能的 —— 浏览器只扫描 HTML 前 1024 字节，且要求它出现在 开始后、任何非 ASCII 字符（包括 BOM、注释、空行）之前。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
常见失效场景：<meta charset="UTF-8"> 写在 外；文件开头有 UTF-8 BOM（EF BB BF）； 前有注释或空行；写成了 <meta charset="utf8">（缺横杠）或 <meta charset="UTF8">（非标准写法）。
- 用 VS Code 打开文件 → 右下角点击编码名称 → 选 “Reopen with Encoding” → 依次试 UTF-8、GBK → 看源码是否变正常
- 确认后 → 右下角再点编码 → “Save with Encoding” → 选
UTF-8（不是 “UTF-8 with BOM”） - Linux/macOS 下用
head -c 3 index.html | xxd检查是否有 BOM；PowerShell 用Get-Content index.html -Encoding Byte | Select -First 3 -
<meta charset="UTF-8">必须是内第一个标签，前面不能有任何字符（包括空格、换行、<!-- -->）
注意 JS/CSS/AJAX 加载内容的编码一致性
即使 HTML 主体正常，通过 fetch、XMLHttpRequest 或 $.get() 加载的文本、JSON、模板也可能单独乱码。这些资源不受 HTML 的 <meta charset> 影响，依赖各自响应头的 Content-Type。
比如一个 data.json 文件，如果服务器返回 Content-Type: application/json 但没带 charset=utf-8，Chrome 会 fallback 到 ISO-8859-1，导致中文变成乱码；CSS 文件若含中文注释或字体名，也需确保其本身是 UTF-8 编码且响应头正确。
- AJAX 请求后，打印
response.headers.get("content-type")确认 charset - 静态 JSON/CSV 文件部署时，用
file -i data.json检查实际编码，避免编辑器误存为 GBK - Webpack/Vite 构建项目时，确保
html-webpack-plugin或vite-plugin-html输出的 HTML 是 UTF-8 无 BOM - 后端模板渲染（如 EJS、Thymeleaf）要显式设置输出编码，不能只依赖 HTML meta
BOM 和响应头缺失这两点最容易被忽略，它们会让 <meta charset="UTF-8"> 完全失效，却看不出明显报错。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
