前言更新
问题对于而缺少 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 在七小时前更新了新版本。随即卸载回退上一个版本,问题解决!
临时的解决方法
卸载插件后选择安装特定版本 3.0.1 问题解决
更新
从提交的反馈中了解到了问题所在,由于HBuilderX创建的 uni-app 项目没有 node_modules 而是 uni_modules ,而3.0.2版本之前如果检测不到 node_modules,全局类型会被写到每一个 .vue 的虚拟文件里面,会造成大量内存开销。现在需要在 tsconfig.json 或者 jsconfig.json 里面手动指定 vueCompilerOptions.globalTypesPath
#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中
记得是重启插件!!!
总结
这个错误提示是 Vue Language Tools 团队有意设计的功能,而不是一个bug。目的是为了解决此前在检测不到 node_modules,全局类型会被写到每一个 .vue 的虚拟文件里面,会造成大量内存开销的问题。如果像我一样是在 vscode 中编写像 uni-app 这样缺少 node_modules 的项目都应该注意这个问题。及时配置 jsconfig.json 加以解决。