Ruoyi 启动前端报错“vue-cli-service”不是内部或外部命令的解决之道

Ruoyi 前端启动报错？手把手解决 "vue-cli-service" 不存在的难题！

# 前言

在使用 Ruoyi 框架构建项目时，您可能会遇到前端启动时报错 "vue-cli-service" 不是内部或外部命令的情况。这通常是由以下原因造成的：

• 未安装 vue-cli
• Node 环境变量未正确配置
• 未配置 npm 淘宝镜像

本文将深入探讨这些原因，并提供一步步的解决步骤，帮助您彻底解决此问题。

# 缘起：Ruoyi 前端启动报错的根源

## 未安装 vue-cli

vue-cli 是一个脚手架工具，用于快速创建和构建 Vue.js 项目。如果您尚未安装 vue-cli，则需要先进行安装。

## Node 环境变量未正确配置

Node 环境变量用于指定 Node.js 可执行文件的路径。如果 Node 环境变量未正确配置，则系统无法找到 vue-cli 可执行文件，从而导致上述错误。

## 未配置 npm 淘宝镜像

在国内使用 npm 安装包时，由于网络原因，可能会导致安装速度缓慢或失败。为了解决这个问题，您可以配置 npm 淘宝镜像，以加速安装速度。

# 一步步解决 Ruoyi 前端启动报错问题

## 1. 检查 Node 环境变量

Windows 系统：

• 右键单击 "计算机"，选择 "属性"。
• 在 "系统" 窗口中，单击 "高级系统设置"。
• 在 "系统属性" 窗口中，单击 "环境变量"。
• 在 "用户变量" 部分，找到名为 "Path" 的变量，检查其值是否包含 Node.js 可执行文件的路径。

## 2. 安装 vue-cli

如果 Node 环境变量已正确配置，但您仍然遇到上述错误，则您需要安装 vue-cli。

npm install -g @vue/cli

## 3. 配置 npm 淘宝镜像

npm config set registry https://registry.npm.taobao.org

## 4. 在 node_modules 目录中全局安装 vue-cli

• 在项目根目录下，创建一个名为 node_modules 的目录。
• 在 node_modules 目录下，运行以下命令：

npm install -g @vue/cli

# 总结：一劳永逸解决 Ruoyi 前端启动报错问题

通过上述步骤，您应该可以解决 Ruoyi 前端启动时报错 "vue-cli-service" 不是内部或外部命令的问题。在今后的项目中，您也可以使用这些步骤来解决类似的问题。

以下是一些额外的建议，可以帮助您避免此类问题的发生：

• 在安装 Node.js 时，请确保正确配置 Node 环境变量。
• 在安装 vue-cli 时，请使用最新版本的 npm。
• 在配置 npm 淘宝镜像时，请使用最新的镜像地址。
• 在全局安装 vue-cli 时，请确保您在项目根目录下操作。

# 常见问题解答

## 1. 为什么我在全局安装 vue-cli 后仍然遇到 "vue-cli-service" 不存在的错误？

这可能是因为您的 PATH 环境变量中没有包含 node_modules/.bin 目录。请确保 PATH 环境变量包含以下路径：

/path/to/your/project/node_modules/.bin

## 2. 我配置了 npm 淘宝镜像，但安装包速度仍然很慢。

可能是由于网络原因导致。您可以尝试使用其他镜像，例如：

npm config set registry https://registry.npmmirror.com

## 3. 我在执行 npm install 时遇到错误，提示 "找不到模块 'xxx'"。

这可能是由于缺少依赖关系造成的。请尝试运行以下命令来安装丢失的依赖项：

npm install --save-dev xxx

## 4. 我在运行 vue-cli 命令时遇到 "command not found" 错误。

这可能是由于您尚未安装 vue-cli。请使用以下命令安装 vue-cli：

npm install -g @vue/cli

## 5. 我在运行 vue-cli 命令时遇到 "SyntaxError: Unexpected token '<'" 错误。

这可能是由于您的 Node.js 版本过低造成的。请确保您使用的是最新版本的 Node.js。