Vite基本概要

一、Vite 简介

Vite 是一种新型的前端构建工具，旨在为现代 web 开发提供更快、更精简的开发体验。它由尤雨溪（Vue.js 的作者）团队开发，在当下的前端项目中被广泛应用，尤其适合基于现代 JavaScript 框架（如 Vue、React 等）构建的项目。

与传统的构建工具（如 Webpack）相比，Vite 利用了浏览器原生支持的 ES 模块（ES Modules），在开发阶段不需要像传统方式那样将所有模块提前打包，而是按需进行编译和加载，从而实现了极快的冷启动速度和模块热替换（HMR），大大提升了开发效率。

二、Vite 的核心特点

1. 快速的冷启动

在传统构建工具启动开发服务器时，往往需要对整个项目的代码进行打包分析等一系列复杂操作，耗时较长。而 Vite 基于 ES 模块的特性，在启动时只需启动一个轻量级的开发服务器，然后直接将浏览器指向源文件，浏览器会按照 ES 模块的规则自动去加载依赖，无需提前全量打包，所以能在瞬间启动项目，开发者可以快速进入开发状态。

例如，对于一个中大型的 Vue 项目，使用 Webpack 启动开发服务器可能需要数秒甚至十几秒，而 Vite 往往能在几百毫秒内就启动完成。

2. 高效的模块热替换（HMR）

当我们在开发过程中修改了代码，Vite 能够精准地定位到发生变化的模块，并仅仅更新该模块对应的内容在浏览器中的显示，无需刷新整个页面。这使得开发者可以实时看到代码修改后的效果，保持开发的连贯性，进一步提高开发效率。

比如在修改一个 Vue 组件的样式或者逻辑时，修改后几乎立即就能在浏览器中看到更新后的样子，操作体验非常流畅。

3. 原生 ES 模块支持

Vite 充分利用了现代浏览器原生支持 ES 模块这一特性。在开发阶段，Vite 直接将代码以 ES 模块的形式提供给浏览器，浏览器会按照 ES 模块的规范去解析和加载依赖，减少了中间转化的成本。不过在生产环境下，Vite 还是会对代码进行打包优化等处理，以保证最佳的性能和兼容性。

4. 插件化架构

Vite 拥有丰富的插件生态，通过插件可以轻松扩展其功能，满足各种不同的项目需求。无论是对特定文件类型的处理、优化开发体验，还是与第三方工具的集成等，都可以通过编写或使用现有的插件来实现。

例如，有插件可以帮助优化 CSS 的处理、实现对 SVG 文件的特殊处理，或者将项目与后端 API 进行更好的联调等。

三、Vite 的基本使用

1. 安装

要使用 Vite，首先需要全局安装它的脚手架工具：

npm install -g create-vite
# 或者使用 yarn
yarn global add create-vite

安装完成后，就可以用它来创建新项目了。

2. 创建项目

使用以下命令创建一个基于 Vite 的项目（以 Vue 项目为例）：

# 创建一个基于 Vue 的 Vite 项目，项目名称为 my-vite-project
create-vite my-vite-project --template vue

这里的 --template 参数可以指定不同的模板，除了 vue，还可以选择 react、preact 等，根据自己的项目框架需求来定。

创建完成后，进入项目目录：

cd my-vite-project

3. 安装项目依赖并启动开发服务器

在项目目录下，运行以下命令安装依赖：

npm install
# 或者
yarn install

然后启动开发服务器：

npm run dev
# 或者
yarn dev

此时，Vite 会启动开发服务器，并且在控制台输出项目运行的地址（一般是 http://localhost:3000 之类的），打开浏览器访问该地址，就能看到项目运行起来了。

4. 项目结构

一个典型的 Vite 项目结构如下：

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

public 目录：存放一些公共的静态资源，比如网站图标等，这些资源会被直接复制到项目的根目录下，在 HTML 中可以直接通过相对路径引用。
src 目录：是项目的主要源代码目录，包含了各种组件、样式、业务逻辑代码等。
index.html：项目的入口 HTML 文件，Vite 会将其作为开发服务器的入口，并且在构建生产版本时，也会基于此文件进行处理。
vite.config.js：Vite 项目的配置文件，在这里可以配置插件、服务器相关选项、构建相关的设置等，用来定制化项目的构建和开发流程。

5. 配置文件（vite.config.js）

下面是一个简单的 vite.config.js 文件示例，用于配置一些基础的功能，比如添加插件、设置服务器端口等：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';export default defineConfig({plugins: [vue()],server: {port: 3001, // 设置开发服务器的端口为 3001},
});

plugins 字段：用于配置项目需要使用的插件，这里引入了 @vitejs/plugin-vue 插件来支持 Vue 项目的编译等相关处理，不同的项目框架需要对应的插件支持。
server 字段：可以对开发服务器进行各种设置，除了端口，还可以配置代理等功能，方便与后端 API 进行联调。例如，设置代理可以这样写：

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

这样，前端项目中以 /api 开头的请求都会被代理到 http://localhost:8080 这个后端服务器地址上。

6. 构建生产版本

当项目开发完成，需要部署到生产环境时，可以使用以下命令构建项目：

npm run build
# 或者
yarn build

Vite 会对项目进行打包、优化等一系列操作，生成可以直接部署到服务器上的静态文件，一般会生成 dist 目录，里面包含了 HTML、CSS、JavaScript 等经过处理后的文件，将这个目录下的内容部署到服务器相应位置即可让网站上线运行。

四、Vite 与不同框架的结合

1. Vue 项目

如前面所述，创建 Vue 项目时使用对应的 vue 模板即可。在项目中编写 Vue 组件、使用 Vue 的各种特性（如 Composition API、Options API 等）都和常规的 Vue 开发类似，Vite 会自动处理好相关的编译和优化工作。
对于 Vue 的单文件组件（.vue 文件），Vite 借助插件可以很好地解析其中的 <template>、<script> 和 <style> 部分，将它们分别编译成对应的 JavaScript、CSS 等代码。

2. React 项目

创建 React 项目时选择 react 模板，例如：

create-vite my-react-project --template react

在 React 项目中，可以正常使用 React 的各种 API（如 useState、useEffect 等）来构建组件、处理逻辑。Vite 会确保 React 项目中的 JSX 等语法能够被正确编译和处理，同时也能享受到 Vite 的快速开发和构建优势。

3. 其他框架

除了 Vue 和 React，Vite 也支持 Preact、Svelte 等其他前端框架，使用方式类似，都是通过选择对应的模板来创建项目，然后按照各自框架的开发规范进行代码编写，Vite 会在底层做好适配和构建相关的工作。

五、Vite 的生态与社区

Vite 在前端社区中拥有庞大的生态，有大量的开源插件可供选择，涵盖了从代码风格检查、性能优化到与各种第三方工具集成等方方面面。同时，很多开发者也在不断分享关于 Vite 的使用经验、最佳实践以及各种实际项目中的案例，通过参与社区（如 GitHub 上的 Vite 仓库、相关论坛等）可以及时了解到 Vite 的最新动态、学习他人的优秀做法，进一步提升自己运用 Vite 进行前端开发的能力。

总之，Vite 作为一个强大且高效的前端构建工具，为前端开发带来了诸多便利，值得深入学习和掌握，希望这份笔记能帮助你更好地开启 Vite 的自学之旅呀！