IntelliJ预览HTML无法识别CSS、图片等静态资源路径怎么办

问题判定依据 #

首先排除代码、项目公共配置问题，符合以下特征即可判定为本地IDE配置/环境拦截问题：

• 静态资源路径写法正确，按住Ctrl+鼠标左键点击路径可正常跳转定位到对应文件
• 启动项目后通过浏览器访问页面，所有资源加载、渲染完全正常
• 团队其他成员拉取同一份代码后，IDE内置预览、项目运行均无异常
• 已尝试重建项目、清除IDE全局缓存、重装IDE均未解决问题

排查修复步骤（按优先级操作） #

• 检查静态资源目录标记
  右键点击项目中存放CSS、图片等静态资源的根目录，依次打开Mark Directory as菜单，确认目录被标记为Resources Root。逐层检查所有静态资源子目录，确认没有被误标记为Excluded（排除目录），误标记会导致IDE内置服务无法映射对应路径的资源。
• 调整内置服务配置
  打开IDE设置面板，依次进入Build, Execution, Deployment > Debugger > Built-in Server：
  1. 勾选Allow unsigned requests选项
  2. 将默认端口修改为1024以上的未占用端口（默认63342端口如果被本地其他服务占用，内置服务会静默加载失败，不会弹出明确报错）
  3. 取消勾选Can accept external connections，避免本地代理拦截跨域请求
• 排查本地拦截规则
  IDE内置预览本质是启动一个临时本地HTTP服务渲染页面，本地代理、抓包工具、安全软件很容易拦截该服务的请求：
  1. 暂时关闭系统全局代理、Charles/Fiddler等抓包工具、第三方安全软件的网页防护功能
  2. 打开内置预览页面后按F12调出开发者工具，查看Console面板的报错信息，如果资源请求报403、连接被重置错误，即可确认是本地拦截导致
  3. 将localhost、127.0.0.1加入代理软件的绕过列表，避免本地服务请求被代理转发
• 重置项目级配置
  重装IDE、清除全局缓存不会删除项目下的.idea配置文件夹，损坏的项目级配置会持续生效：
  1. 关闭当前项目，进入项目根目录
  2. 删除.idea文件夹（如果有自定义的运行配置，可提前备份文件夹内的runConfigurations子目录）
  3. 重新用IDE打开项目，等待索引完成后再测试预览功能

验证方式 #

打开任意HTML文件启动内置预览，按F12打开开发者工具，切换到Network面板，确认所有CSS、图片资源的请求地址为http://localhost:你设置的内置端口/项目名/资源路径，且状态码为200即为修复成功。

内容的提问来源于stack exchange，提问作者van