vue 项目npm 打包遇到的一些bug记录

问题场景 ：npm 的版本正确，nodejs 的版本也是正常的，之前npm run build 打包都正常没问题，但是因为其他原因电脑重装了，环境重新配置了。npm run dev 跑没问题,打包就报错了，信息如下：

rc/utils/utils.ts:241:50 - error TS2345: Argument of type 'T' is not assignable to parameter of type 'Component'.
  Type 'T' is not assignable to type 'FunctionalComponent'.

241     app.component(comp.name || comp.displayName, component);
                                                     ~~~~~~~~~

  src/utils/utils.ts:238:29
    238 export const withInstall = (component: T, alias?: string): T & Plugin => {
                                    ~
    This type parameter might need an `extends FunctionalComponent` constraint.
  src/utils/utils.ts:238:29
    238 export const withInstall = (component: T, alias?: string): T & Plugin => {
                                    ~
    This type parameter might need an `extends Component` constraint.


Found 1 error in src/utils/utils.ts:241

npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! security-enterprise-admin@3.4.0 build:prod: `vue-tsc --noEmit && vite build --mode production`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the security-enterprise-admin@3.4.0 build:prod script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\15819\AppData\Roaming\npm-cache\_logs\2023-09-11T00_32_04_737Z-debug.log
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! security-enterprise-admin@3.4.0 build: `npm run build:prod`
npm ERR! Exit status 2
npm ERR!
npm ERR! Failed at the security-enterprise-admin@3.4.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\15819\AppData\Roaming\npm-cache\_logs\2023-09-11T00_32_04_763Z-debug.log
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

咋一看不是npm 问题 写法格式问题 ，不支持这个泛型的写法？？ 但是项目一直正常运行的 而且报错部分代码都没有动过。正常解决 卸载依赖 卸载package-lock.json 重新instal 一下，查看报错日志。还是不行，这是纳闷了。

最后就去看了一下npm 相关知识 切换源 换cnpm pnpm 都试了终于找到原因了

npm 更新依赖会把最新的版本更新了这样就会导致项目依赖版本不匹配的原因。这是npm 的弊端，而yarn 会指定版本来下载依赖。

可能这个问题都听过但是只有自己遇到了会比较深刻一点。yarn 是兼容npm 的以后项目有配置或者做项目都尽量用 yarn命令。

最后解决方案：

删除mode、package-lock.json
安装 yran

npm install -g yarn
npm uninstall yarn -g  //yarn卸载
1
2

再次下载依赖

yarn install
1

打包

yarn build 
1

OK搞定！