PhpStorm依赖图不显示index.html引用关系，因其默认仅分析PHP/JS/TS等模块化语言，HTML被视为静态文件而不参与符号级依赖解析；替代方案是用Alt+F7执行Find Usages定位文本级引用。
为什么 PhpStorm 的依赖图不显示 index.html 的引用关系
PhpStorm 的 Dependency Diagram（依赖图）默认只分析 PHP、JavaScript、TypeScript 和部分模板语言（如 Twig、Blade）的符号级依赖，index.html 作为纯静态 HTML 文件，不会被解析为“可分析模块”，因此它既不会作为依赖源（被谁引用），也不会作为依赖目标（引用了谁）出现在图中。这不是配置问题，而是设计限制。
常见错误现象：右键 index.html → “Show Dependencies” 灰掉，或点击后弹出空图/提示“No dependencies found”。
- HTML 中的
<script src="app.js">、<link href="style.css">不触发 JS/CSS 文件到 HTML 的反向依赖边 - 即使启用了
HTML Tools插件，依赖图引擎也不将 HTML 视为“模块化入口” - PHP 混写（如
<?php include 'header.php'; ?>）中，只有 PHP 部分参与依赖分析，HTML 片段仍被忽略
替代方案：用“Find Usages”定位 HTML 资源引用点
虽然依赖图不可用，但 PhpStorm 提供更精准的轻量级替代——Find Usages。它能真实反映哪些文件在文本层面引用了 index.html 或其资源路径。
使用场景：排查 index.html 是否被其他 HTML、JS、PHP 或构建配置引用；检查 assets/js/main.js 是否真被 index.html 加载。
立即学习“PHP免费学习笔记（深入）”；
- 将光标放在
index.html文件名上（非内容内），按Alt+F7（Windows/Linux）或⌥F7（macOS） - 结果会列出所有含该文件名的字符串匹配，包括：
<a href="index.html">、window.location = "index.html"、require('./index.html')（如果用了 Webpack loader） - 若想查谁引用了
style.css，直接打开该 CSS 文件，对文件名执行Find Usages即可
让 HTML 资源参与项目级依赖管理的务实做法
真正需要“管理 HTML 引用”的场景，往往指向构建流程或部署一致性，而非 IDE 图形化展示。PhpStorm 本身不替代构建工具，但可配合配置增强感知。
关键点在于统一资源路径声明，避免硬编码导致分析失效：
- 用
base标签（<base href="/static/">）集中控制相对路径基准，减少../嵌套带来的路径歧义 - 在 JS 中避免拼接 HTML 路径：
fetch('data.json')比fetch(window.location.pathname.replace(/[^/]+$/, '') + '/data.json')更易被Find Usages捕获 - 若用 Vite/Webpack，确保
index.html是入口，在vite.config.ts中显式配置build.rollupOptions.input = 'index.html'，此时 PhpStorm 的“Project Structure”能识别其枢纽地位
容易被忽略的细节：HTML 属性值不被索引的边界情况
PhpStorm 的文本索引默认不解析 HTML 属性值中的动态表达式，比如 Vue 的 v-bind:src="'img/' + name + '.png' 或 Angular 的 [src]="'assets/' + icon"。这些不会触发对 img/xxx.png 的引用识别。
这意味着：即使你看到 Find Usages 找到了某张图片，也可能漏掉模板绑定场景下的调用。
- Vue 单文件组件中，应优先用
import logo from '@/assets/logo.png'，再在模板中写:src="logo"—— 这样logo.png才会被当作模块依赖索引 - 对纯 HTML 项目，建议用构建脚本（如 esbuild + HTML plugin）预处理路径，生成可被 IDE 文本搜索覆盖的静态字符串
- 检查
Settings → Editor → File Types中，确认HTML Files的注册模式包含*.html，且未被其他模式（如 “Text files”）意外覆盖
