How to solve ' vue-cli-service ' Is not recognized as an internal or external command?

When encountering the issue where "vue-cli-service" is not recognized as an internal or external command, it typically indicates that the system cannot locate the "vue-cli-service" command within the environment variables. This may occur due to Vue CLI not being installed correctly or its installation path not being added to the system's environment variables. Below are several steps to resolve this issue:

1. Verify Vue CLI is Installed

First, confirm that Vue CLI is properly installed on your system. You can check the Vue CLI version by entering the following command in the command line:

bash
vue --version

If the system prompts that "vue" is not an internal or external command, it signifies that Vue CLI is either not installed or not installed correctly.

2. Install Vue CLI

If Vue CLI is not installed, you can install it using npm:

bash
npm install -g @vue/cli

This command globally installs the latest version of Vue CLI. After installation, run vue --version again to confirm successful installation.

3. Check Environment Variables

If Vue CLI is installed but the command remains unrecognized, it may be because the installation path of Vue CLI is not included in the system's environment variables. Follow these steps to check and modify the environment variables:

For Windows systems:

• Open "System Properties" (you can quickly access it by searching for "Environment Variables" in the Start menu)
• Click the "Advanced" tab, then click the "Environment Variables" button
• In the system variables, locate the Path variable, select it, and click "Edit"
• Verify that the global npm installation path (typically C:\Users\<your username>\AppData\Roaming\npm) is included
• If missing, manually add this path

For macOS or Linux systems:

• Open the terminal and edit the .bashrc or .zshrc file (depending on your shell)

• Confirm that the following line exists or add it:

  bash
  export PATH="$PATH:/usr/local/share/npm/bin"

• Save the file and reload the configuration (use source ~/.bashrc or source ~/.zshrc)

4. Restart the Command Line Interface

After modifying the environment variables, restart the command line interface (close and reopen it) to apply the changes.

5. Test and Verify

Finally, run vue-cli-service related commands (e.g., vue-cli-service serve) to confirm the issue has been resolved.

By following these steps, you can typically resolve the "vue-cli-service" command not recognized issue. If the problem persists, you may need to investigate other system configurations or permission issues.