Ionic 6+Vue3项目执行npx ionic serve时CPU占满及重复日志问题求助

在全新Vue3项目中使用Ionic6，执行npx ionic serve时，项目构建、服务运行及文件变更后的重建均正常，但控制台会持续输出[INFO] Waiting for connectivity with vue-cli-service...日志，且单个处理器占用率达100%，疑似陷入自旋锁。

执行命令的日志 #

> npx ionic serve                                                                                                                                      main [⇡] 
> vue-cli-service serve
[vue-cli-service]  INFO  Starting development server...
[38%] building (23/196 modules)
Build finished at 11:42:48 by 0.000s

[vue-cli-service]   App running at:
[vue-cli-service]   - Local:   http://localhost:8100/ 
[vue-cli-service]   - Network: http://192.168.50.45:8100/
[vue-cli-service]   Note that the development build is not optimized.
[vue-cli-service]   To create a production build, run npm run build.
No issues found.
[INFO] Waiting for connectivity with vue-cli-service...
[INFO] Waiting for connectivity with vue-cli-service...
[repeats until process is killed]

项目package.json配置 #

{
  "name": "audio-flashcards-vue",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@capacitor/app": "1.1.1",
    "@capacitor/core": "3.6.0",
    "@capacitor/haptics": "1.1.4",
    "@capacitor/keyboard": "1.2.3",
    "@capacitor/status-bar": "1.0.8",
    "@ionic/vue": "^6.0.0",
    "@ionic/vue-router": "^6.0.0",
    "@vueuse/core": "^8.9.3",
    "@vueuse/router": "^8.9.3",
    "core-js": "^3.6.5",
    "pinia": "^2.0.16",
    "pinia-plugin-persistedstate": "^1.6.3",
    "vue": "^3.2.21",
    "vue-router": "^4.1.2"
  },
  "devDependencies": {
    "@capacitor/cli": "3.6.0",
    "@types/jest": "^27.0.2",
    "@typescript-eslint/eslint-plugin": "^5.6.0",
    "@typescript-eslint/parser": "^5.6.0",
    "@vue/cli-plugin-babel": "~5.0.0-rc.1",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0-rc.1",
    "@vue/cli-plugin-eslint": "~5.0.0-rc.1",
    "@vue/cli-plugin-router": "~5.0.0-rc.1",
    "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
    "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
    "@vue/cli-service": "~5.0.0-rc.1",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^2.0.0-rc.16",
    "@vue/vue3-jest": "^27.0.0-alpha.3",
    "babel-jest": "^27.3.1",
    "cypress": "^8.7.0",
    "eslint": "^8.4.1",
    "eslint-plugin-vue": "^8.2.0",
    "jest": "^27.3.1",
    "ts-jest": "^27.0.7",
    "typescript": "^4.3.5"
  },
  "description": "An Ionic project"
}

npx ionic info结果 #

> npx ionic info        

   Ionic CLI       : 6.20.1 (/Users/saschwarz/.nvm/versions/node/v18.3.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 6.1.13

Capacitor:

   Capacitor CLI      : 3.6.0
   @capacitor/android : not installed
   @capacitor/core    : 3.6.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.6.0

System:

   NodeJS : v18.3.0 (/Users/saschwarz/.nvm/versions/node/v18.3.0/bin/node)
   npm    : 8.11.0
   OS     : macOS Monterey

解决思路 #

• 直接使用vue-cli-service启动：既然npm run serve本身能正常运行，暂时跳过Ionic CLI的启动逻辑，直接执行npm run serve，规避Ionic CLI与vue-cli-service的连接检测问题。
• 升级@vue/cli-service到稳定版：当前使用的是~5.0.0-rc.1候选版本，存在兼容性风险，升级到正式稳定版（如5.0.8及以上），修复可能的通信bug。
• 降级Node.js版本：当前使用Node.js 18.3.0，Ionic CLI 6.20.1对Node.js 18的兼容性可能存在问题，尝试降级到Node.js 16.x LTS版本后再测试npx ionic serve。
• 指定端口启动：尝试指定端口启动服务，避免端口检测逻辑异常：npx ionic serve --port 8101，确保vue-cli-service也使用对应端口。
• 清除缓存并重装依赖：
  1. 删除node_modules文件夹和package-lock.json文件
  2. 执行npm cache clean --force
  3. 重新执行npm install
• 更新Ionic相关依赖：将@ionic/vue和@ionic/vue-router升级到最新稳定版，修复已知的CLI通信问题。

内容的提问来源于stack exchange，提问作者saschwarz