异常教程

vite 安装（手把手讲解）

更新时间:

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

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 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 作为新一代前端构建工具，凭借其闪电般的启动速度、开箱即用的热更新功能以及对现代 JavaScript 特性的原生支持，迅速成为开发者青睐的首选方案。然而，对于编程初学者和部分中级开发者而言，首次接触 Vite 的安装流程时，可能会对环境配置、依赖管理或命令行操作感到困惑。本文将通过 逐步拆解、案例演示和常见问题解答 的方式，系统讲解如何高效完成 vite 安装，并深入剖析其核心原理，帮助读者建立扎实的实践基础。

一、安装前的准备工作

1.1 确认基础环境

在开始 vite 安装 之前，需确保本地已安装以下工具：

  • Node.js：Vite 依赖 Node.js 运行环境，建议版本在 16.13.0 或更高（可通过命令 node -v 查看版本）。
  • npm 或 pnpm/yarn：包管理工具用于下载 Vite 及项目依赖。

比喻说明：
可以将 Node.js 想象为“开发环境的发动机”，而 npm 则是“零件配送员”，它们共同协作才能让 Vite 这辆“高性能跑车”启动并运行。

1.2 环境检查与修复

若未安装 Node.js，可通过以下步骤完成：

  1. 访问 Node.js 官网 ，下载对应操作系统的安装包。
  2. 运行安装程序并选择默认配置。
  3. 验证安装： 
    node -v  
npm -v

    若输出版本号，则表示环境配置成功。

提示：
对于 Mac 用户，可通过 Homebrew 安装 Node.js：

brew install node

二、vite 安装的详细步骤

2.1 全局安装 vs 本地安装

Vite 支持两种安装模式：

  • 全局安装：npm install -g vite
    适合希望在任意目录直接使用 vite 命令创建项目的场景。
  • 本地安装（推荐）：
    在项目目录中通过 npm create vite@latest 命令初始化，依赖仅存在于当前项目。

关键区别：
全局安装可能因版本冲突导致问题，而本地安装确保每个项目使用独立的 Vite 版本，避免兼容性风险。

2.2 通过交互式命令创建项目

以本地安装为例，执行以下步骤：

cd your-project-directory  

npm create vite@latest

案例演示：
若选择框架为 Vue3，终端会自动生成包含以下结构的项目：

my-vue-project/  
├── node_modules/  
├── public/  
├── src/  
│   ├── assets/  
│   ├── components/  
│   └── main.js  
├── index.html  
├── package.json  
└── vite.config.js

2.3 安装项目依赖

初始化完成后，需安装项目依赖：

cd my-vue-project  
npm install

此命令会根据 package.json 中的 dependencies 和 devDependencies 自动下载所有必要包。

三、进阶配置与常见问题解决

3.1 自定义 Vite 配置文件

Vite 的核心配置文件为 vite.config.js。通过修改此文件，可实现以下功能：

  • 设置代理解决跨域问题
  • 配置 CSS 预处理器
  • 添加插件扩展功能

示例配置：

// vite.config.js  
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  plugins: [
    vue() // 若使用 Vue 框架，需引入对应的插件
  ]
}

3.2 解决常见安装错误

3.2.1 网络问题导致依赖下载失败

现象：安装时出现 ETIMEDOUT 或 ECONNRESET 错误。
解决方案：

  • 使用淘宝镜像加速： 
    npm install -g cnpm --registry=https://registry.npmmirror.com  
cnpm install
  • 临时关闭防火墙或代理设置。

3.2.2 版本冲突问题

现象：运行 npm run dev 时提示 command not found。
原因：项目依赖未正确安装或脚本配置缺失。
解决步骤：

  1. 删除 node_modules 和 package-lock.json。
  2. 重新执行 npm install。
  3. 检查 package.json 中的 scripts 部分是否包含： 
    "scripts": {
  "dev": "vite",
  "build": "vite build"
}

四、Vite 安装的原理与优势解析

4.1 为什么 Vite 的安装如此快速？

Vite 的核心优势源于其基于原生 ES 模块的设计：

  • 开发阶段直接通过浏览器原生支持的 import 语法加载代码，无需打包。
  • 仅在生产环境构建时才使用 Rollup 进行打包优化，大幅减少开发时的等待时间。

比喻说明：
传统构建工具（如 Webpack）像“手工裁缝”，每次修改代码都要重新剪裁缝制整件衣服；而 Vite 则像“智能试衣镜”，实时展示修改效果，仅在最终交付时才进行精细裁剪。

4.2 与 Create React App 的对比

特性ViteCreate React App (CRA)
开发服务器启动时间< 1 秒几秒至数十秒（依赖项目规模）
热更新延迟几乎无延迟通常 500ms-1s
生产构建速度更快（基于 Rollup）较慢（基于 Webpack）
框架兼容性支持 Vue, React, Svelte 等仅原生支持 React

五、实战案例：从安装到部署

5.1 创建一个 React 项目并运行

npm create vite@latest my-react-app -- --template react  
cd my-react-app  
npm install  
npm run dev

访问 http://localhost:3000，即可看到默认的 React 欢迎页面。

5.2 部署到 GitHub Pages

通过配置 vite.config.js 实现静态资源部署：

export default {
  build: {
    outDir: 'docs', // 输出目录需与 GitHub Pages 设置的分支路径一致
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        assetFileNames: 'assets/[name].[ext]',
        entryFileNames: 'assets/[name].[hash].js'
      }
    }
  }
}

完成构建后，将 docs 目录推送到 GitHub 仓库的 gh-pages 分支即可。

六、总结与展望

通过本文的详细讲解，读者应已掌握 vite 安装 的核心流程、配置技巧及问题排查方法。Vite 的高效性能和灵活性使其成为现代前端开发的基石，而其生态也在持续扩展（如支持 TypeScript、Vitest 测试框架等）。

对于初学者，建议从基础项目开始实践，逐步探索插件系统与高级配置；中级开发者则可结合实际需求，将 Vite 与 CI/CD 流水线、微前端架构等结合，进一步提升开发效能。

下一步行动建议：

  1. 访问 Vite 官方文档 深入学习插件开发。
  2. 尝试用 Vite 重构现有项目，对比传统构建工具的差异。
  3. 参与社区案例分享，积累实战经验。

掌握 Vite 安装与配置，不仅是技术能力的提升，更是拥抱现代前端工程化的关键一步。

最新发布

查看更多文章