Vue3旧组件转TS报vue模块导出缺失错误新组件正常如何解决

问题根因 #

你的报错是依赖版本冲突导致的，核心有两个问题：

• 依赖混入了Vue2专属编译包
  你的package.json中同时安装了vue@3.2.20（Vue3核心包）和vue-template-compiler@^2.6.14（仅适配Vue2的模板编译器），两者的类型定义互相冲突，导致TypeScript无法正确识别Vue3导出的defineComponent、inject、ref等API。
• TypeScript版本不满足Vue3要求
  你当前使用的typescript@~3.9.3版本过低，Vue3.2及以上版本要求TypeScript最低为4.1版本，低版本TS无法解析Vue3的类型定义。

编辑器中新建的Test.vue暂时不报错属于编辑器插件的缓存问题，编译阶段两个文件都报错已经说明是全局依赖问题，和单个组件代码本身无关。

修复方案 #

1. 卸载冲突的Vue2依赖：

npm uninstall vue-template-compiler

2. 升级TypeScript到适配版本：

npm install typescript@4.7 -D

3. 清理依赖缓存后重新安装启动：

rm -rf node_modules package-lock.json
npm install
npm run serve

4. 额外建议：VS Code使用Volar插件代替Vetur作为Vue开发插件，Vetur对Vue3+TS的支持存在较多兼容问题，容易出现类型识别错误。

另外你的组件代码还有一处小问题：两个catch块中直接给apiMessage赋值，没有操作.value属性，改成apiMessage.value = 'xxx'即可，否则会丢失响应性。

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