Vite

基本概念

Vite 是一个现代化的前端构建工具，旨在通过利用现代浏览器的原生 ES 模块支持，提供快速的开发体验。

官网

https://cn.vite.dev/

官方文档

https://cn.vite.dev/guide/

组成部分

Vite 由两部分组成：

开发服务器

基于原生 ES 模块，提供超快的热更新。

构建命令

使用 Rollup 打包代码，生成适用于生产环境的优化静态资源。

说明：

Vite 需要 Node.js 版本 18+ 或 20+。然而有些模板需要依赖更高的 Node 版本才能正常运行，当你的包管理器发出警告时，请注意升级你的 Node 版本。

优点

1、极速启动

利用浏览器原生 ES 模块支持，无需打包，启动速度极快。

2、快速热更新

仅更新修改的模块，保持应用状态，提升开发效率。

3、丰富的功能

支持 TypeScript、JSX、CSS 等，开箱即用。

4、高度可扩展

通过插件系统，轻松集成其他工具和框架。

工作原理

开发模式

1、Vite 启动一个开发服务器，利用浏览器原生支持 ES 模块的特性，直接加载源代码。

2、当代码发生变化时，Vite 只会更新修改的模块，并通知浏览器进行热更新，保持应用状态。

生产模型

1、Vite 使用 Rollup 打包代码，生成优化后的静态资源文件。

2、这些文件可以部署到任何静态文件服务器上。

应用场景

1、单页应用 (SPA)

如 Vue、React 项目。

2、静态网站

快速构建博客、文档等。

3、库开发

利用 Vite 的构建功能，高效开发和打包库。

创建vite项目

1、使用命令创建

运行以下命令来创建一个新的 Vite 项目

npm create vite@latest

按照提示输入项目名称并选择模板

选择模板后，Vite 会自动创建项目目录并安装依赖

项目结构如下图：

node_modules: 存放项目依赖的文件夹。

public: 存放静态资源的文件夹，例如图片、字体等。

src: 存放项目源代码的文件夹。

main.js: 项目入口文件。

App.vue: Vue 项目根组件。

index.html: 项目首页。

package.json: 项目配置文件，包含项目信息、依赖和脚本命令。

vite.config.js: Vite 配置文件，用于配置 Vite 的各种选项。

2、启动开发服务器

进入项目目录

cd runoob-vite-test

安装依赖

npm install

运行以下命令启动开发服务器

npm run dev

执行后出现下面的信息：

Vite 会启动一个本地开发服务器，并打印出访问地址，例如 http://localhost:5173，端口可以在 vite.config.js 中配置修改。打开浏览器访问该地址，即可看到你的 Vite 项目。

Vite常用功能

1、使用 CSS 预处理器

Vite 支持使用 Sass、Less、Stylus 等 CSS 预处理器。要使用这些预处理器，你需要先安装相应的依赖：

Sass:

npm install -D sass

Less:

npm install -D less

Stylus:

npm install -D stylus

安装完成后，你就可以在项目中使用相应的 CSS 预处理器了。

例如，在 Vue 项目中，你可以使用 <style lang="scss"> 来编写 Sass 代码。

2、使用 TypeScript

要使用 TypeScript，你需要先安装 TypeScript

npm install -D typescript

安装完成后，你可以将 .js 文件重命名为 .ts 文件，并使用 TypeScript 语法编写代码。Vite 会自动编译 TypeScript 代码。

3、使用 import 语句

4、使用环境变量

Vite 支持使用环境变量来配置不同的环境。你可以使用 .env 文件来定义环境变量。

创建.env文件，文件内容如下：

VITE_API_URL=https://api.example.com

在代码中使用环境变量:

const apiUrl = import.meta.env.VITE_API_URL

5、使用插件

Vite 拥有丰富的插件生态系统，可以帮助你扩展 Vite 的功能。我们可以使用 Vite 插件来实现代码压缩、图片优化、代码分析等功能。

安装插件：

npm install -D vite-plugin-xxx

配置插件：

在 vite.config.js 文件中配置插件

配置文件 vite.config.js

配置文件基础语法

主要配置分类

基础配置

root: 项目根目录

base: 公共基础路径

mode: 模式设置

define: 全局常量定义

开发服务器配置

server.host: 主机地址

server.port: 端口号

server.proxy: 代理设置

server.hmr: 热更新配置

构建配置

build.outDir: 输出目录

build.rollupOptions: Rollup配置

build.minify: 压缩选项

build.sourcemap: Source Map配置

插件配置

plugins: 插件数组

支持条件插件加载

插件选项配置

路径解析

resolve.alias: 路径别名

resolve.extensions: 文件扩展名

resolve.conditions: 解析条件

环境变量处理

条件配置模型

vite.config.ts

基本概念

Vite 构建工具的配置文件。

说明

这是使用typescript创建的配置文件。

作用

1、项目配置

定义了 Vite 项目的各项配置，如基础路径、环境变量加载、路径别名等。

2、开发服务器

配置开发服务器，包括端口、代理、热更新等。

3、插件集成

集成了 Vite 插件，用于扩展构建能力（如 Vue 支持、图片优化等）。

4、构建优化

配置生产环境的打包行为，如输出目录、代码压缩、资源文件命名规则等

与其他工具对比

常用命令

1、项目创建命令

npm create vite@latest

npm create vite@latest my-project

2、启动开发服务器

npm run dev

3、生产构建

npm run build

4、构建预览结果

npm run preview

5、依赖预构建

npx vite optimize

总结

Vite 通过现代化的架构设计，显著提升了前端开发的效率和体验，是目前最受欢迎的构建工具之一。