Angular 17升级后Vite Dev Server在VSCode中调试异常求助

查看Vite配置 #

• Angular 17默认采用Vite作为构建器，直接查看项目根目录的angular.json：找到architect.serve.options里的buildTarget，对应到architect.build.configurations.development节点，这里的配置直接关联Vite的运行行为。如果需要自定义Vite规则，还可以在architect.build.options中添加viteConfig字段，指定自定义配置文件的路径。
• 在终端执行ng config projects.<你的项目名>.architect.build.options，可快速输出当前项目的构建配置细节，包含所有Vite相关参数。

获取Vite详细运行日志 #

• 启动开发服务时添加--verbose参数，直接执行ng serve --verbose，这会输出Vite打包、服务器启动的每一步细节，比如模块处理进度、插件执行状态，能帮你定位到卡住的环节。
• 如果使用VSCode调试，修改.vscode/tasks.json中对应启动任务的配置，给start脚本的args数组加上"--verbose"，示例如下：

  {
    "label": "npm: start",
    "type": "npm",
    "script": "start",
    "args": ["--verbose"],
    "problemMatcher": ["$tsc-watch"],
    "isBackground": true
  }
  

  这样调试启动时就能同步拿到详细日志。

排查常见卡壳原因 #

• 先禁用项目中的自定义Vite插件或第三方构建插件，升级后这类插件很可能与Angular 17的Vite构建器存在兼容性问题，禁用后验证是否恢复正常。
• 检查tsconfig.json和tsconfig.app.json的include/exclude规则，若不小心包含了大量无关文件，Vite会持续处于增量构建循环，导致一直显示“Building...”。
• 排查项目中的循环依赖，Vite对循环依赖的处理逻辑与Webpack不同，可能引发构建卡住。可执行ng build --stats-json生成构建统计文件，分析依赖链路。

相关文档参考 #

• Angular官方文档的「构建与部署」板块，包含专门的「Vite构建器」章节，详细说明了配置方法与参数调整方式。
• 在终端执行npx vite --help，可查看Vite自身的所有命令行参数说明；若项目中存在自动生成的vite.config.ts，文件内的注释也能帮助理解配置项的作用。

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