【异常】Jenkins执行前端项目Npm构建时，出现报错This dependency was not found: vue-class-component in ./node_modules/vu

一、报错截图

同事的代码变更，导致了在Jenkins无法执行构建

13:50:30   WARN  A new version of sass-loader is available. Please upgrade for best experience.
13:50:31  TypeError: Cannot set property mark of #<Object> which has only a getter
13:50:31  TypeError: Cannot set property mark of #<Object> which has only a getter
13:50:31      at Object.connectTypeScriptPerformance (/data/jenkins/jenkins/workspace/xxx/node_modules/fork-ts-checker-webpack-plugin-v5/lib/typescript-reporter/profile/TypeScriptPerformance.js:12:36)
13:50:31      at createTypeScriptReporter (/data/jenkins/jenkins/workspace/xxx/node_modules/fork-ts-checker-webpack-plugin-v5/lib/typescript-reporter/reporter/TypeScriptReporter.js:36:49)
13:50:31      at Object.<anonymous> (/data/jenkins/jenkins/workspace/xxx/node_modules/fork-ts-checker-webpack-plugin-v5/lib/reporter/reporter-rpc/ReporterRpcService.js:20:30)
13:50:31      at Generator.next (<anonymous>)
13:50:31      at /data/jenkins/jenkins/workspace/xxx/node_modules/fork-ts-checker-webpack-plugin-v5/lib/reporter/reporter-rpc/ReporterRpcService.js:8:71
13:50:31      at new Promise (<anonymous>)
13:50:31      at __awaiter (/data/jenkins/jenkins/workspace/xxx/node_modules/fork-ts-checker-webpack-plugin-v5/lib/reporter/reporter-rpc/ReporterRpcService.js:4:12)
13:50:31      at /data/jenkins/jenkins/workspace/xxx/node_modules/fork-ts-checker-webpack-plugin-v5/lib/reporter/reporter-rpc/ReporterRpcService.js:18:88
13:50:31      at Object.<anonymous> (/data/jenkins/jenkins/workspace/xxx/node_modules/fork-ts-checker-webpack-plugin-v5/lib/rpc/RpcService.js:23:38)
13:50:31      at Generator.next (<anonymous>)
13:50:58   ERROR  Failed to compile with 2 errors1:50:56 PM
13:50:58  
13:50:58  This dependency was not found:
13:50:58  
13:50:58  * vue-class-component in ./node_modules/vue-property-decorator/lib/index.js, ./node_modules/vue-property-decorator/lib/decorators/Watch.js
13:50:58  
13:50:58  To install it, you can run: npm install --save vue-class-component
13:50:58   ERROR  Build failed with errors.
13:50:58  npm ERR! code ELIFECYCLE
13:50:58  npm ERR! errno 1
13:50:58  npm ERR! [email protected] build: `vue-cli-service build --mode prod`
13:50:58  npm ERR! Exit status 1
13:50:58  npm ERR! 
13:50:58  npm ERR! Failed at the [email protected] build script.
13:50:58  npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
13:50:58  
13:50:58  npm ERR! A complete log of this run can be found in:
13:50:58  npm ERR!     /data/jenkins/.npm/_logs/2023-04-19T05_50_56_890Z-debug.log

二、报错说明

错误的原因是项目中引入了vue-class-component，但是在项目的依赖列表中，却没有找到它，因此会报如上的错误。

2.1 vue-class-component介绍

vue-class-component是一个用于类式Vue组件的TypeScript装饰器。
它允许您将Vue组件定义为类，这可以使您的代码更有组织性和易于阅读。
它还提供了其他装饰器，用于定义计算属性、观察者和事件处理程序。

官方文档

2.2 使用vue-class-component

要使用vue-class-component，您首先需要通过npm安装它：

npm install vue-class-component

安装后，您可以在Vue组件文件中导入它，并使用@Component装饰器将组件定义为类：

import {
    
     Component, Vue } from 'vue-class-component';

@Component
export default class MyComponent extends Vue {
    
    
  // 组件逻辑在这里
}

然后，您可以将组件的数据、方法和生命周期钩子定义为类属性和方法：

@Component
export default class MyComponent extends Vue {
    
    
  // 数据
  message: string = 'Hello, world!';

  // 方法
  onClick(): void {
    
    
    console.log('Button clicked!');
  }

  // 生命周期钩子
  mounted(): void {
    
    
    console.log('Component mounted!');
  }
}

三、报错解决

引入vue-class-component即可，并且重新执行一下Jenkins的构建，即重新build一波试试，问题解决！