Vue.js - 使用Vite搭建Vue3项目教程（附：详细操作步骤）

作者：hangge | 2026-03-24 09:04

Vite 凭借其极速启动、快如闪电的热重载吸引了许多开发者。据 Vite 官网介绍，Vite 使用 Go 语言编写的 esbuild 进行预构建依赖，比使用 JavaScript 编写的打包器预构建依赖的速度快 10 倍到 100 倍。官方对 Vite 的定义为：下一代的前端工具链，为开发提供极速响应。本文将演示如何使用 Vite 快速创建 Vue.js 3 项目。

一、基本介绍

1，什么是 Vite？

（1）Vite 是前端构建工具，专门解决现代前端开发面临的各种复杂问题。

（2）Vite 具有以下优点：

极速的服务启动：使用原生 ESM 文件，无须打包。
轻量快速的热重载：无论应用程序大小如何，都能实现极快的模块热替换（HMR）。
丰富的功能：对 TypeScript、JSX、CSS 等支持开箱即用。
优化的构建：可选“多页应用”或“库”模式的预配置 Rollup 构建。
通用的插件：在开发和构建之间共享 Rollup-superset 插件接口。
完全类型化的 API：灵活的 API 和完整的 TypeScript 类型。

（3）Vite 也存在如下一些不足：

相比于 webpack，Vite 整个社区插件还在快速完善；
Vite 更新迭代速度较快，在开发时需注意使用的版本；
在生产环境中，Vite 需要额外依赖 Rollup 等工具进行打包。

2，webpack 和 Vite 的区别与对比

（1）Vue CLI 和 create-vue 这两种脚手架都支持开箱即用，都可以快速创建 Vue.js 工程化项目。 Vue CLI 是基于 webpack 实现的，而 create-vue 是基于 Vite 实现的。

（2）webpack 和 Vite 的区别如下：

在打包应用程序时，webpack 会生成一个依赖关系图。该依赖关系图中含有应用程序所需的所有模块，然后遍历图结构，编译一个个模块，当某个模块有变化时，相关依赖模块需要全部编译一次。项目越复杂、模块越多，打包速度就越慢。
Vite 利用 ES Module 可以自动发起请求的特性，在打包应用程序时，Vite 不需要分析模块的依赖，也不需要编译。当浏览器请求某个模块时，再按需对模块内容进行编译，这种按需动态编译的方式大幅缩减了编译时间。因此，Vite 的启动速度非常快，比以 JavaScript 编写的打包器预构建依赖的速度快 10 倍到 100 倍。项目越复杂、模块越多， Vite 打包的优势就越明显。
Vite 天然支持打包 TypeScript、JSX、CSS 等文件；而 webpack 需要安装对应的 Loader 专门进行处理。
webpack 支持开发和生产环境打包；Vite 在打包生产环境时需要使用 Rollup，Vite 的主要优势体现在开发阶段。
webpack 无论是自身优势还是生态都非常强大，使用者非常多；而 Vite 的整个社区生态正在快速完善。

二、使用 Vite 搭建项目

1，create-vue 介绍

（1）create-vue 类似于 VueCLI 脚手架，可用于快速创建 Vue.js 3 项目。Vue CLI 基于 webpack，而 create-vue 基于 Vite。Vite 支持 VueCLI 中的大多数配置，并且 Vite 以极速启动服务、快如闪电的热重载，提供了更好的开发体验。

（2）与 Vue CLI 不同的是，create-vue 脚手架会根据你选择的功能创建一个预配置的项目，然后将其余部分委托给 Vite。需要注意的是，create-vue 脚手架要求 Node.js 版本大于 16。

2，create-vue 新建项目

（1）首先我们在终端中执行以下命令，安装 create-vue 脚手架的最新版本。

npm install create-vue@latest -g

（2）安装后我们就可以执行如下命令开始新建 Vue.js 3 项目了。

create-vue

（3）首先会要求我们输入项目名称：

（4）接着会让我们选中是否安装相关功能：

（5）接着提示是否需要安装相关试验特性，不需要的话直接回车。

（6）接着提示是否跳过示例代码，我们直接回车保留示例代码。

（7）创建完毕后就可以看到项目的目录结构如下图所示。

三、项目的运行和打包

1，安装依赖

在运行或或者打包项目之前，我们需要进入项目目录，执行如下命令安装项目所需的依赖。

npm install

2，运行项目

（1）依赖安装后，执行如下命令运行项目。

npm run dev

（2）运行后即可在浏览器中输入“localhost:5173”查看项目效果，如下图所示。

3，打包项目

（1）打包项目与 Vue CLI 一样，在终端中进入项目目录，然后命令进行打包。

npm run build

（2）打包成功后，会在项目的根目录下生成一个 dist 文件夹。