运行Vue项目时出现“vue-cli-service: command not found”错误求助

Hey there, let's tackle this frustrating problem you're facing with your Vue 2.6.12 project. It's super annoying that you have to manually create a symlink for vue-cli-service when it should be auto-generated during dependency installation—let's break down what's going on and fix it properly.

The Problem Recap #

After running these commands in your project root:

rm -rf node_modules
npm install
npm run serve

You hit the error: sh: vue-cli-service: command not found. Manually adding the symlink node_modules/.bin/vue-cli-service -> ../@vue/cli-service/bin/vue-cli-service.js fixes it, but this step shouldn't be necessary. You're using npm 7.0.3, and your package.json correctly lists "@vue/cli-service": "^4.5.6" in devDependencies.

Why This Happens & Fixes to Try #

1. npm 7.x Compatibility Quirks

npm 7 introduced changes to dependency resolution and bin symlink handling that don't play nicely with older versions of @vue/cli-service (like 4.5.6). This is the most common culprit here.

• Fix: Downgrade npm to the 6.x branch, which is fully compatible with @vue/cli-service 4.x:

  npm install -g npm@6
  

  Then clean up and reinstall dependencies from scratch:

  rm -rf node_modules package-lock.json
  npm install
  npm run serve
  

2. Stale package-lock.json Causing Issues

Your existing package-lock.json might have cached outdated paths or bin configurations, preventing npm from creating the correct symlink during installation.

• Fix: Delete both node_modules and package-lock.json to force npm to rebuild the dependency tree from scratch:

  rm -rf node_modules package-lock.json
  npm install
  

  This ensures all symlinks are generated based on the latest dependency metadata.

3. Corrupted npm Cache or Permissions Problems

Occasionally, npm's local cache can get corrupted, or file permissions in your project directory might block proper symlink creation.

• Fix:
  1. Clear the npm cache first:

     npm cache clean --force
     

  2. Then remove node_modules and package-lock.json and reinstall:

     rm -rf node_modules package-lock.json
     npm install
     

  3. If you're on macOS/Linux, ensure your user has read/write permissions for the project directory (run sudo chown -R $USER:$USER . in the project root if needed).

4. Incomplete Installation of @vue/cli-service

Network hiccups during npm install can leave @vue/cli-service partially installed, missing the necessary bin setup.

• Fix: Reinstall @vue/cli-service explicitly to ensure it's fully set up:

  npm install @vue/cli-service@4.5.6 --save-dev
  

  After this, check if the symlink in node_modules/.bin exists automatically before running npm run serve.

Final Notes #

The npm version mismatch is almost certainly the main issue here—downgrading to npm 6 should resolve the auto-symlink problem long-term. If none of the above fixes work, double-check that your package.json doesn't have typos in the @vue/cli-service entry, and confirm you're running commands from the correct project root directory.

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