The “vue-cli-service is not recognized as an internal or external command” error means that your system can’t find the vue-cli-service executable. This usually happens because the Vue CLI isn’t installed globally, isn’t installed in your project, or your system’s PATH environment variable isn’t configured correctly. Here’s a breakdown of how to fix it:
1. Verify Vue CLI Installation
First, check if you have the Vue CLI installed globally:
vue --version
If you get a version number, the Vue CLI is installed globally. If you get an error, it’s likely not installed globally.
2. Local vs. Global Installation (Recommended Approach)
It’s generally recommended to install the Vue CLI locally within your project. This ensures that everyone working on the project uses the same version of the CLI.
Look for the Vue CLI in your project’s package.json file under devDependencies. If it’s there, it’s installed locally. Install Locally (if not present)
npm install @vue/cli-service --save-dev # npm yarn add @vue/cli-service --dev # yarn
3. Using the Locally Installed Vue CLI
If the Vue CLI is installed locally, you can’t run vue-cli-service directly. Instead, you need to use npx (npm) or yarn to execute the command:
npx vue-cli-service build # npm yarn vue-cli-service build # yarn npx vue-cli-service serve # npm yarn vue-cli-service serve # yarn npx vue-cli-service inspect # npm yarn vue-cli-service inspect # yarn
4. Global Installation (Less Recommended)
If you absolutely need to install the Vue CLI globally (though local installation is preferred), follow these steps:
npm install -g @vue/cli # npm yarn global add @vue/cli # yarn
After the installation, close and reopen your terminal or command prompt for the changes to take effect. Then try vue –version again.
5. PATH Environment Variable (If Globally Installed)
If you’ve installed the Vue CLI globally and still get the error, your system’s PATH environment variable might not be configured correctly. This variable tells your system where to look for executable files.
Windows:
- Search for “Environment Variables” in the Windows search bar.
- Click on “Edit the system environment variables”.
- Click the “Environment Variables…” button.
- Under “System variables,” find the “Path” variable and select it.
- Click “Edit…”
- Make sure the path to your global npm packages is included. This is often something like %AppData%\npm or %AppData%\Roaming\npm. If it’s not there, add it.
macOS/Linux:
- Open your shell configuration file (e.g., ~/.bashrc, ~/.zshrc, ~/.profile).
- Add the following line, replacing the actual path (often /usr/local/lib/node_modules or similar): export PATH=”$PATH:/bin”
- Save the file and source it (e.g., source ~/.bashrc).
6. Project Dependencies
Sometimes, even with a global install, the error can appear if the project itself has a conflicting or missing dependency. Try these steps:
Delete node_modules and package-lock.json (or yarn.lock):
rm -rf node_modules rm package-lock.json # or yarn.lock
Reinstall Dependencies:
npm install # npm yarn # yarn
7. Npm Cache
Clear the npm cache:
npm cache clean --force
8. Reinstall Node.js (Last Resort)
If none of the above solutions work, try reinstalling Node.js. Make sure you download the latest LTS version from the official Node.js website.