vite install（长文讲解）

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

• 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
• 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

在现代前端开发领域，构建工具的选择直接影响开发效率与项目质量。随着 Vite 的快速崛起，它凭借其独特的设计理念和卓越性能，逐渐成为开发者的新宠。本文将以 vite install 为核心，深入讲解如何从零开始安装 Vite，配置项目，并解决常见问题。无论你是编程初学者还是中级开发者，都能通过本文掌握 Vite 的核心使用场景与最佳实践。

一、安装 Vite 前的准备

1.1 确保 Node.js 和 npm 已安装

Vite 是基于 Node.js 的工具，因此在安装前需要确认你的开发环境已安装 Node.js 和 npm（Node Package Manager）。你可以通过以下命令检查版本：

node -v  
npm -v  

如果未安装，需先访问 Node.js 官网 下载并安装最新 LTS 版本。

类比说明：
Node.js 可以看作是前端开发的“引擎”，而 npm 则是“工具箱”。只有引擎启动后，才能通过工具箱（npm）获取 Vite 这样的“工具”来搭建项目。

二、通过 Vite 创建项目

2.1 使用 npm create vite@latest 命令

Vite 提供了一套简洁的命令行工具，允许开发者快速创建项目。以下是标准安装步骤：

npm create vite@latest  

执行上述命令后，系统会提示你输入以下信息：

1. 项目名称（例如 my-vite-app）；
2. 选择模板（如 vanilla、vue、react 等）。

示例交互过程：

✔ Project name: … my-vite-app  
✔ Select a framework: › vanilla  
✔ Select a variant: … vanilla  

完成输入后，Vite 会自动生成项目目录结构，并自动安装依赖。

2.2 手动安装 Vite（适用于高级场景）

如果你需要更灵活的控制，也可以通过以下步骤手动安装：

1. 在已存在的项目目录中运行：

   npm init vite@latest  
   

2. 或者全局安装 Vite 命令行工具：

   npm install -g create-vite  
   

   然后通过 create-vite 命令创建项目。

注意事项：
全局安装可能需要管理员权限（例如添加 sudo 前缀），但推荐使用本地安装以避免版本冲突。

三、Vite 项目配置详解

3.1 基础配置文件 vite.config.js

Vite 的配置文件通常位于项目根目录，通过 JavaScript 或 TypeScript 编写。以下是一个典型的配置示例：

import { defineConfig } from 'vite';  
import react from '@vitejs/plugin-react';  

export default defineConfig({  
  plugins: [react()],  
  server: {  
    port: 3000, // 指定开发服务器端口  
    open: true, // 自动打开浏览器  
  },  
  build: {  
    outDir: 'dist', // 指定构建输出目录  
  },  
});  

关键配置项说明：

• plugins：用于集成第三方插件（如 React、Vue 的插件）。
• server：开发服务器的运行参数，如端口、代理设置等。
• build：控制构建行为，如输出路径、压缩选项等。

3.2 开发与构建命令

安装完成后，通过以下命令启动开发服务器：

npm run dev  

而构建生产版本则使用：

npm run build  

性能优势：
Vite 的开发服务器基于原生 ES 模块（ESM）和按需编译技术，首次启动后热更新速度极快，无需等待全量打包。

四、常见问题与解决方案

4.1 安装依赖失败或超时

问题现象：
执行 npm install 时，部分依赖包长时间卡住或报错。

解决方案：

1. 更换 npm 镜像源：

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

2. 清理 npm 缓存：

   npm cache clean --force  
   

3. 手动安装失败的包：
   若某个包安装失败，可单独尝试：

   npm install <package-name> --force  
   

4.2 端口冲突导致开发服务器无法启动

问题现象：
运行 npm run dev 时提示端口 3000 被占用。

解决方案：
在 vite.config.js 中修改端口号：

server: {  
  port: 3001, // 更改为未被占用的端口  
},  

或在启动命令中直接指定端口：

npm run dev -- --port 3001  

五、进阶技巧与最佳实践

5.1 使用 TypeScript

若你的项目需要 TypeScript 支持，在创建项目时选择 vanilla-ts、react-ts 等带后缀的模板。

npm create vite@latest my-ts-app -- --template vanilla-ts  

随后，在项目中编写 .ts 或 .tsx 文件即可。

5.2 配置代理解决跨域问题

在 vite.config.js 中添加代理配置：

server: {  
  proxy: {  
    '/api': {  
      target: 'http://localhost:8080', // 后端服务地址  
      changeOrigin: true,  
      rewrite: (path) => path.replace(/^\/api/, ''),  
    },  
  },  
},  

这样，前端请求 /api/xxx 会被代理到后端接口，避免跨域限制。

六、Vite 与其他工具的对比

6.1 与 Webpack 的差异

• 开发模式：Vite 使用原生 ES 模块，而 Webpack 需要先打包；
• 冷启动：Vite 的首次启动速度远快于 Webpack；
• 配置复杂度：Vite 的默认配置已足够强大，适合快速开发。

类比说明：
Vite 好比“点餐式服务”，只编译你需要的部分；而 Webpack 更像“套餐式服务”，需要打包所有内容后才能使用。

6.2 与 Parcel 的差异

Parcel 同样以零配置著称，但 Vite 在以下方面更具优势：

• 插件生态：Vite 的插件体系更成熟，且与主流框架（React/Vue）深度集成；
• 性能优化：Vite 的按需编译技术使其在大型项目中表现更稳定。

结论

通过本文，我们系统学习了如何通过 vite install 命令创建项目、配置开发环境，并解决了常见问题。Vite 以其极简的设计和高效性能，重新定义了现代前端开发的体验。无论是快速搭建原型，还是构建复杂应用，Vite 都能提供流畅的开发流程。

下一步行动建议：

1. 尝试用 Vite 创建一个 React 或 Vue 项目；
2. 阅读官方文档，探索更多高级功能（如自定义插件、TypeScript 集成）；
3. 在实际项目中对比 Vite 与其他工具的性能差异。

掌握 Vite 的核心用法后，你将能更高效地应对前端开发中的各种挑战，享受现代化工具带来的便利。