【前端】monorepo项目关于ts包类型检测的bug

bug描述

前端的monorepo项目，相关内容可以参考前一篇文章。
技术栈：vue + ts + vite
在写代码的时候突然发现前端项目的main.ts中的相关代码报错

代码如下

import { createApp } from 'vue'
import './style.scss'
import App from './App.vue'
import i18n from '@/i18n.ts'
import router from '@/router'
import {
  getAdressByLocation,
  getCurrentLocation,
  getWeatherByHeFeng,
  InterceptLocalStorage,
} from '@/util'
import 'element-plus/theme-chalk/src/index.scss'
import 'qweather-icons/font/qweather-icons.css'

InterceptLocalStorage()
// 使用示例
getCurrentLocation().then((res) => {
  getAdressByLocation().then((res) => {
    getWeatherByHeFeng()
  })
})
const app = createApp(App)
// 将实例挂载到全局属性
// app.config.globalProperties.$elMessage = elMessage;
app.use(i18n) // 这里报错
app.use(router) // 这里也是
app.mount('#app')

报错代码为app.use(i18n)，ts提示为：

“I18n<{ en: { title: string; readMore: string; search: string; searchPlaceholder: string; add: string; save: string; cancel: string; edit: string; delete: string; submit: string; confirm: string; close: string; ... 11 more ...; aigc: { ...; }; }; zh: { ...; }; }, {}, {}, string, false>”的参数不能赋给类型“Plugin<[]>”的参数。
  不能将类型“I18n<{ en: { title: string; readMore: string; search: string; searchPlaceholder: string; add: string; save: string; cancel: string; edit: string; delete: string; submit: string; confirm: string; close: string; ... 11 more ...; aigc: { ...; }; }; zh: { ...; }; }, {}, {}, string, false>”分配给类型“FunctionPlugin<[]>”。
    不能将类型“I18n<{ en: { title: string; readMore: string; search: string; searchPlaceholder: string; add: string; save: string; cancel: string; edit: string; delete: string; submit: string; confirm: string; close: string; ... 11 more ...; aigc: { ...; }; }; zh: { ...; }; }, {}, {}, string, false>”分配给类型“(app: App<any>) => any”。
      类型“I18n<{ en: { title: string; readMore: string; search: string; searchPlaceholder: string; add: string; save: string; cancel: string; edit: string; delete: string; submit: string; confirm: string; close: string; ... 11 more ...; aigc: { ...; }; }; zh: { ...; }; }, {}, {}, string, false>”提供的内容与签名“(app: App<any>): any”不匹配。ts(2345)

同样app.use(router)报错类似：

类型“Router”的参数不能赋给类型“Plugin<[]>”的参数。
  不能将类型“Router”分配给类型“FunctionPlugin<[]>”。

解决过程

刚开始以为是tsconfig的原因（因为这两天才重新搞了一下整个monorepo的配置），但是gpt给出的原因有三种：

1.确保 router.ts 正确导出 default router（无效）

import { createRouter, createWebHistory } from "vue-router";
import Home from "../views/Home.vue";

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: "/", component: Home }
  ]
});

export default router; // ✅ 必须 default export
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router"; // 确保 router.ts 里正确导出了 router

const app = createApp(App);
app.use(router); // ✅ 不需要额外转换
app.mount("#app");

2. 如果仍然报错，可以 手动断言 router 是Plugin（无效）

app.use(router as any); // 强行绕过 TS 检查（不推荐）
// 或者更安全的方法
import type { Plugin } from "vue";

app.use(router as Plugin);
// 但这个会提示类型Plugin已经被废弃，解决不了

3.可能是 Vue 版本不兼容，升级 Vue & Vue Router（无效）

pnpm update vue vue-router

4.回退今天的改动，判断是否是最新的改动引起的（无效）

在网上找的话不好搜索，关键词重复度太高，很容易搜索出来类似问题的答案，而且部分网站的检索很垃圾，很难找到答案。

解决方案

原因：
monorepo架构项目的依赖解析问题，安装在根目录下的依赖在子项目的ts解析过程中是需要先导入才能解析到的
步骤：
在根目录下卸载，在子项目下安装：

cd ..
cd ..
// 此时在根目录下
pnpm uninstall vue-i18n
cd packages/web
// 进入到子项目目录
pnpm install vue-i18n
// 重启vscode

最终解决