WebStorm左侧项目树顶部名称需同步修改.idea/modules.xml中的fileurl/filepath属性值及对应.iml文件名，二者必须一致，否则显示异常；还需更新package.json的name字段以避免后续构建等问题。
WebStorm 左侧项目树顶部显示的名称怎么改
这个名称不是随便显示的，它来自 .idea/modules.xml 里记录的模块路径，以及对应 .iml 文件的文件名。直接在 IDE 里右键重命名项目文件夹，不会自动同步更新这个显示名——你看到的还是旧名字，甚至可能出现「新文件夹名[旧项目名]」这种奇怪拼接。
必须手动改 .idea/modules.xml 和 .iml 文件
WebStorm 的项目名显示逻辑很底层：它读取 modules.xml 中 <module fileurl="..."> 的路径，再提取其中的 .iml 文件名（不含扩展名）作为显示名。所以两处必须一致：
- 编辑
.idea/modules.xml，把fileurl和filepath属性里的旧项目名替换成新项目名（例如guotou4.iml→guotou5en.iml） - 把同目录下的旧
.iml文件重命名为新名字（mv guotou4.iml guotou5en.iml） - 检查
.idea/workspace.xml里是否还有残留的旧项目名（极少数情况需要清理，但通常不改也无碍显示）
别用右键 Rename 项目文件夹代替重构
在项目根目录上右键 → Refactor → Rename 是针对「模块」的重构操作，但它只改 .iml 文件名和 modules.xml，**不会自动重命名外层文件夹**。如果你先手动改了文件夹名，再点这个，反而容易导致路径错乱、IDE 找不到模块。
更稳妥的做法是：
- 先确保磁盘上的文件夹名已是目标名（比如从
my-vue-app改为client-web） - 再进
.idea目录，同步更新.iml文件名和modules.xml - 重启 WebStorm，左侧项目名就干净了
Vue 项目还要顺手改 package.json 的 name
虽然这不影响 WebStorm 左侧显示，但漏掉会导致后续问题：
-
npm run serve启动时控制台仍打印旧项目名 - 构建产物
dist/index.html的<title>不会变（除非你手动改了index.html） - CI/CD 脚本或 Docker 镜像 tag 若依赖
package.json#name，就会出错
所以打开根目录 package.json，把 "name": "my-vue-app" 改成新名字，再删掉 node_modules 重装依赖——这不是为了 WebStorm 显示，而是避免隐性故障。
最常被忽略的是 .iml 文件名和 modules.xml 不一致，哪怕只差一个字母，WebStorm 就会 fallback 到显示文件夹名+方括号旧名。改完务必重启 IDE，别信“刷新项目”能生效。
