一、報(bào)錯(cuò)截圖

同事的代碼變更，導(dǎo)致了在Jenkins無法執(zhí)行構(gòu)建

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

二、報(bào)錯(cuò)說明

錯(cuò)誤的原因是項(xiàng)目中引入了vue-class-component，但是在項(xiàng)目的依賴列表中，卻沒有找到它，因此會(huì)報(bào)如上的錯(cuò)誤。

2.1 vue-class-component介紹

vue-class-component是一個(gè)用于類式Vue組件的TypeScript裝飾器。
它允許您將Vue組件定義為類，這可以使您的代碼更有組織性和易于閱讀。
它還提供了其他裝飾器，用于定義計(jì)算屬性、觀察者和事件處理程序。

官方文檔

2.2 使用vue-class-component

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

npm install vue-class-component

安裝后，您可以在Vue組件文件中導(dǎo)入它，并使用@Component裝飾器將組件定義為類：

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

@Component
export default class MyComponent extends Vue {
  // 組件邏輯在這里
}

然后，您可以將組件的數(shù)據(jù)、方法和生命周期鉤子定義為類屬性和方法：

@Component
export default class MyComponent extends Vue {
  // 數(shù)據(jù)
  message: string = 'Hello, world!';

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

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

三、報(bào)錯(cuò)解決

引入vue-class-component即可，并且重新執(zhí)行一下Jenkins的構(gòu)建，即重新build一波試試，問題解決！
文章來源地址http://www.zghlxwxcb.cn/news/detail-772758.html

到了這里，關(guān)于【異?！縅enkins執(zhí)行前端項(xiàng)目Npm構(gòu)建時(shí)，出現(xiàn)報(bào)錯(cuò)This dependency was not found: vue-class-component in ./node_modules/vu的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！