Vite简介

Vite是一款开箱即用的现代化前端构建工具，它由Vue的作者Evan You创建。Vite最初是为Vue项目设计的，但现已支持大部分主流前端框架，如React、Svelte等。相比直接基于WebPack等一系列工具手动搭建工程，Vite更像是一个设计精良、开箱即用的脚手架，它几乎不需要什么复杂的配置即可开始开发，在合适的项目中使用Vite能极大提升前端项目的开发体验。

项目主页：https://vite.dev/

Vite的优势

冷启动速度快：传统的打包工具（例如WebPack）在启动开发服务器时会一次性打包整个项目，对于大型项目速度较慢，而Vite在开发阶段使用esbuild构建，Vite利用原生ESM按需加载代码，启动时间几乎是秒级，特别适合大型项目。

热更新速度快：Vite的热更新也是基于模块级别进行的，改一个组件只更新这个组件相关的代码，而不是整个项目的Bundle。

原生支持TypeScript/JSX/CSS Module/PostCSS：Vite内置了对这些前端工程常用技术的支持，开箱即用，无需复杂配置。此外Vite也有强大的插件系统，可用社区插件或自定义扩展功能。

简洁的配置和更少的“魔法”：直接基于WebPack搭建前端工程不是一般的复杂，那简直就是一场灾难。而Vite能极大的简化这一过程，Vite的配置文件设计的清晰直观，既能节省工程搭建的时间，也对项目的后期维护具有积极意义。

对比另一个类似且在国内广泛使用的框架Umi，Vite维护相对更加积极，Umi文档写的语焉不详，大量用法靠猜测、经验直觉或是需要查看源码实现，框架本身设计也有很多暗坑，有一种“中国特色开源”、“大厂KPI项目”的意味，时至今日和Vite比起来也是有些黯然失色了。总而言之，对于现代化的前端项目，使用Vite搭建项目是一个非常推荐的选择，它在开发体验方面优势显著。

Vite工程搭建

目前，Vite的最新版本是Vite7，它需要NodeJS20.19+或22.12+版本，我们这里使用的是22.17.1版本。搭建项目时，我们可以先创建一个文件夹，例如demo-vite，然后在其中执行以下命令。

npm create vite@latest .

然后根据提示选择使用的框架模板即可，不同模板之间的区别我们可以查阅create-vite这个Github仓库。

Vite工程目录介绍

我们这里以React项目为例，简单介绍一下Vite默认创建的目录结构。

vite-demo
  |_ public            # 存放静态资源，生产构建时会直接复制到输出目录（通常是dist）
  |_ src               # 源码目录
    |_ assets          # 放置各种需要引入（通过import或模块化方式引用）的资源，这个文件夹名字是约定的，不是必须的
    |_ main.jsx        # React的相关代码从这里开始，代码中创建了React的根组件，被index.html引用，名字可以随意设置
  |_ vite.config.js    # Vite框架配置文件
  |_ eslint.config.js  # ESLint配置文件
  |_ index.html        # 项目入口文件
  |_ package.json      # 项目描述文件
  |_ README.md         # 项目说明文件

Vite项目中有个很独特的设计，index.html在项目的根目录中而不是public文件夹。这是有意而为之的，因为Vite将HTML作为了项目的入口，而非简单的静态文件。我们可以查看index.html的内容。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

代码中，我们使用<script type="module" src="/src/main.jsx">这种写法直接引入了JSX文件，type="module"用于在页面中引入ESM模块，但这看起来仍然有些不可思议，因为引入的代码竟然是JSX！实际上这里Vite会帮我们处理JSX的导入，因此它在Vite工程中是正确的。

再看main.jsx文件，其中的代码将id为root的HTML标签作为React挂载的根节点。此时从HTML入口文件到React框架，一切就都合理了，Vite设计的就是这样优雅和自然。

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";
import "./index.css";
import App from "./App.jsx";

createRoot(document.getElementById("root")).render(
  <StrictMode>
    <App />
  </StrictMode>
);

此外，Vite也支持多页面应用，因此可以存在多个HTML作为多页的入口文件，入口文件如果有很多也可以不必放在根目录，它们的位置可以通过配置调整。

配置`vite.config.js`实现`src`别名

实际开发中我们经常需要调整Vite的一些配置，Vite框架的所有配置都在vite.config.js配置文件中。下面例子我们配置一个开发中很常见的功能，为src目录添加一个别名@。

import { dirname, resolve } from "node:path";
import { fileURLToPath } from "node:url";
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

const __dirname = dirname(fileURLToPath(import.meta.url));

export default defineConfig({
  resolve: {
    alias: {
      "@": resolve(__dirname, "./src"),
    },
  },
  plugins: [react()],
});

此时我们的JavaScript代码中，引入其它文件时就不必写一堆./、../了，我们可以统一使用@作为src目录的别名。

启动项目

根据模板配置好的package.json，运行以下命令使用Npm Script启动项目即可。

npm run dev

如果一切正常，我们应该可以看到模板内置的一个测试页面。

作者：Gacfox