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

心已赠人 2024-03-23 02:25 95阅读 0赞

## 一、报错截图 ##

同事的代码变更，导致了在Jenkins无法执行构建  
![在这里插入图片描述][cdbb1bdf0e4a4be5a0a7ffff59554e67.png]

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! ids@1.0.0 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 ids@1.0.0 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组件定义为类，这可以使您的代码更有组织性和易于阅读。  
它还提供了其他装饰器，用于定义计算属性、观察者和事件处理程序。

[官方文档][Link 1]

### 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一波试试，问题解决！  
![在这里插入图片描述][083d79267a044e06b15ac6dc803fb3c5.png]

[cdbb1bdf0e4a4be5a0a7ffff59554e67.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/398e931497174e659683cdffecfbebc8.png
[Link 1]: https://class-component.vuejs.org/
[083d79267a044e06b15ac6dc803fb3c5.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/961efae670b84c51845fc1a80ef4366e.png