【Vite 篇】 带你解读,vite preview 报错,到底是什么原因

356 阅读2分钟

// vite.config.js

export default { 
   build: { 
       outDir: 'dist‘ // 输出路径 
       emptyOutDir: true, // 是否清空目标目录 
      }, 
  }; 
 前端项目根目录下,启动: vite preview 报错:
 vite: The term 'vite' is not recognized as the name of a cmdet, funcion, script file ,or operable program....

遇到的报错信息:vite: the term 'vite' is not recognized as the name of a cmdlet, function, script file, or operable program,通常是由于 Vite 没有正确安装,或者 Vite 没有在系统的 PATH 环境变量中找到。

以下是解决这个问题的几个常见方法:

1. 确保 Vite 已安装

如果你没有在项目中安装 Vite 或 Vite 没有正确安装,系统就无法识别 vite 命令。

检查是否安装了 Vite:

在项目根目录中运行以下命令,检查 Vite 是否已经被安装:

npm list vite

如果没有安装 Vite,可以通过以下命令安装:

本地安装 Vite:

在项目根目录下执行以下命令来安装 Vite:

npm install vite --save-dev
全局安装 Vite:

如果你想在全局范围内安装 Vite,以便在任何项目中使用 vite 命令:

npm install -g vite

2. 使用 npx 运行 Vite

如果你已经在项目中本地安装了 Vite,但系统仍然无法直接识别 vite 命令,可以使用 npx 来运行 Vite。

在项目根目录下运行:

npx vite preview

npx 会帮助你从本地 node_modules 中执行 vite,而不需要全局安装 Vite。

3. 确保 node_modules/.bin 在环境变量中

当你本地安装了 Vite,它会在 node_modules/.bin 中创建可执行文件。如果 node_modules/.bin 不在你的环境变量 PATH 中,你的系统就无法识别 vite 命令。

解决方法:

你可以使用以下命令来确保通过 npm 安装的二进制文件可以执行:

./node_modules/.bin/vite preview

如果不想每次都指定路径,可以将 node_modules/.bin 添加到 PATH 中。

4. 检查系统 Node.js 和 npm 环境

确保 Node.js 和 npm 已安装:

如果系统没有正确安装 Node.js 或 npm,Vite 也无法正常工作。你可以通过以下命令检查:

node -v
npm -v

如果没有安装或版本过低,请到 Node.js 官方网站 下载并安装最新版本。

5. 清理并重新安装依赖

有时依赖安装过程中会出现问题,导致 Vite 没有正确安装。

解决方法:
  1. 删除 node_modules 文件夹和 package-lock.json 文件:

    rm -rf node_modules package-lock.json
    
  2. 重新安装依赖:

    npm install
    

总结

  • 如果没有安装 Vite,请确保通过 npm install vite --save-dev 安装 Vite。
  • 如果系统无法识别 vite 命令,使用 npx vite preview 来代替。
  • 确保项目环境中 node_modules/.bin 路径被正确识别。

如果你按照这些步骤操作之后仍然遇到问题,请提供更多详细的报错信息,我会进一步帮你排查。