【2025.7.18】缺少node_modules项目在vscode中vue文件template标签报错的解决办法

1,515 阅读2分钟

37d5989a94307d54ae726fa0b0554b3.png

前言更新

问题对于而缺少 node_modules 的项目具有共通性

前言

因为不习惯使用HbuilderX开发,所以在学习uni-app时使用的是在vscode中编写然后切到HbuilderX编译的方法

早上准备继续完成昨天的uni-app练习项目,发现所有.vue文件template标签后报红。本来以为是不小心按到键盘多输入了什么东西,随后就用git回退到了昨天晚上提交的版本,发现问题依旧存在。就想到有可能是早上打开vscode后选择了 更新新版本 的问题

Write global types file failed. Please ensure that "node_modules" exists and "vue" is a direct dependency, or set "vueCompilerOptions.globalTypesPath" in "tsconfig.json" manually.vue(404)

后将报错信息和问题描述丢给了copilot,告诉我 这个错误确实是因为您更新了 VS Code 版本导致的。新版本的 VS Code 中的 Vue 语言服务(Volar)变得更加严格,即使在纯 JavaScript 项目中也会尝试进行 TypeScript 类型检查。 虽然提供的几种解决方案并没有解决问题,但毕竟指出了方向可能是插件问题,随后逐步禁用插件测试,定位到只有 Vue - official 在七小时前更新了新版本。随即卸载回退上一个版本,问题解决!

65b896873af35d5fbeedbf216c31941.png

image.png

临时的解决方法

卸载插件后选择安装特定版本 3.0.1 问题解决

image.png

更新

从提交的反馈中了解到了问题所在,由于HBuilderX创建的 uni-app 项目没有 node_modules 而是 uni_modules ,而3.0.2版本之前如果检测不到 node_modules,全局类型会被写到每一个 .vue 的虚拟文件里面,会造成大量内存开销。现在需要在 tsconfig.json 或者 jsconfig.json 里面手动指定 vueCompilerOptions.globalTypesPath

image.png

#5505 提供了一个在项目缺少 node_modules 时里面手动指定 vueCompilerOptions.globalTypesPath 的方法

解决方案

因为使用 HBuilderX 创建的默认 uni-app 模板中,没有 node_modules tsconfig.json或者 jsconfig.json

  • 首先在项目根目录下创建tsconfig.json 或者 jsconfig.json (以 jsconfig.json 为例)
  • jsconfig.json 中添加
{
  "vueCompilerOptions": {
    "globalTypesPath": "./vue-global-types.d.ts"
  }
}

  • globalTypesPath 中的路径和文件名是可以自己指定的, 也可以像这样 ./types/uni-app.d.ts
  • 随后禁用 Vue (Official) 并重新启动
  • Vue (Official) 会自动在你的指定目录下生成指定文件并配置内容,报错解决!
  • 最后可以将自动生成的全局类型文件 vue-global-types.d.ts 添加到 .gitignore 中

image.png

记得是重启插件!!!

image.png

image.png

总结

这个错误提示是 Vue Language Tools 团队有意设计的功能,而不是一个bug。目的是为了解决此前在检测不到 node_modules,全局类型会被写到每一个 .vue 的虚拟文件里面,会造成大量内存开销的问题。如果像我一样是在 vscode 中编写像 uni-app 这样缺少 node_modules 的项目都应该注意这个问题。及时配置 jsconfig.json 加以解决。