lighthouse ci无法直接测试dist/index.html等静态文件，因其必须通过http协议访问可响应url（如http://localhost:3000），依赖服务端返回text/html、执行js及加载资源，而file://协议不支持这些能力。
为什么直接测 dist 目录里的 HTML 文件会失败
Lighthouse CI 无法直接读取 dist/index.html 这类静态文件路径——它必须通过 HTTP 协议访问一个可响应的 URL，比如 http://localhost:3000。直接传 file:// 或本地路径会报 ERR_FAILED 或静默跳过审计。
根本原因是 Lighthouse（包括 CI 版）依赖 Chrome 的完整渲染环境：需要服务端返回带 Content-Type: text/html 的响应、能执行 JS、能加载相对资源（CSS/JS/img），而文件系统协议不提供这些能力。
- 错误写法：
url: ["./dist/index.html"]或url: ["file:///path/to/dist/index.html"] - 正确做法：先起一个本地服务，再让
lhci collect访问它的地址 - 推荐轻量服务：用
npx serve -s dist -p 3000（注意-s启用单页应用支持）或python3 -m http.server 3000（需确保当前目录是dist）
lighthouserc.json 中 staticDistDir 和 url 不能同时用
staticDistDir 是个“快捷模式”：Lighthouse CI 会自动起一个内建服务，把该目录映射到 http://localhost:PORT，然后默认访问根路径 /。但它不支持多页、不支持自定义路由、也不允许你手动指定 url 数组。
一旦你在配置里写了 url 字段，staticDistDir 就会被忽略——Lighthouse CI 认为你想自己控制访问目标。
- 只测首页且结构简单 → 用
staticDistDir: "./dist"，删掉url字段 - 要测多个路由（如
/about、/blog）→ 删掉staticDistDir，改用url: ["http://localhost:3000", "http://localhost:3000/about"]，并确保服务已启动 - Vue/React 路由需 History 模式支持 → 服务必须返回
200给所有路径（serve -s已内置，Python server 需额外处理）
CI 环境下 collect 阶段常见超时与失真
本地跑分 95，CI 里掉到 60，大概率不是代码问题，而是环境没对齐。最常踩的坑是页面还没真正渲染完，Lighthouse 就结束了采集。
- React/Vue 应用务必加
waitFor：例如"waitFor": "document.querySelector('#app').offsetHeight > 0"，避免审计空壳 DOM - 关闭网络限速：CI 默认启用模拟 4G，但构建产物没压缩、没缓存头，会导致资源加载超时；设
"throttling": "provided"关掉它 - Chrome flags 必须显式传：
--no-sandbox --disable-setuid-sandbox --headless=new，否则 Docker 容器里启动失败 - Node.js 版本要 ≥18：LHCI v13+ 在 Node 16 下会降级运行，影响 LCP 等核心指标采集精度
assertions 写错导致“绿构建但分数烂”
默认情况下，lhci autorun 只生成报告，哪怕 accessibility 得分为 0，CI 也照样通过。断言必须显式声明，且格式不能错。
- 维度名必须带前缀：
"categories:performance"，不是"performance"或"performanceScore" -
minScore是小数：0.9表示 90 分，写成90会被静默忽略 - 策略等级选准：
["error", {...}]失败阻断构建，["warn", {...}]只输出警告不中断 - 多个 URL 任一不达标即失败：比如测 3 个页面，只要其中 1 个
performance ，整个 CI job 就报错
最容易被忽略的是 upload 配置缺失——没配 upload.target，报告就只存在本地，断言其实根本没生效；temporary-public-storage 是最快捷的免运维选择。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
