Vite是什么？Vite如何使用？相比于Vue CLI的区别是什么？（一篇文章帮你搞定！）

Vite 简介

Vite 是一个由 Vue.js 的作者尤雨溪开发的新一代前端构建工具，旨在提供快速的开发体验。Vite 的名字来源于法语，意为"快"，它主要利用了现代浏览器对 ES Modules 的原生支持，从而实现了极快的开发服务器启动时间和热更新速度。

Vite 的核心特性

极快的开发服务器启动时间 ：Vite 通过利用 ES Modules 的原生支持，在开发模式下不需要打包整个应用，而是直接在浏览器中加载模块。这大大缩短了开发服务器的启动时间。
即时热模块替换（HMR）：Vite 提供了几乎即时的热模块替换功能，当你修改代码时，仅更新发生变化的模块，而不是整个页面刷新，从而显著提高开发效率。
原生 ES 模块支持：Vite 充分利用了现代浏览器对 ES 模块的原生支持，避免了传统的打包过程，使得开发和生产环境的表现更加一致。
插件系统：Vite 支持丰富的插件生态系统，允许开发者根据需要扩展构建过程。
多种框架支持：除了 Vue.js，Vite 还支持 React、Svelte 等多种前端框架。

Vite 与 Vue CLI 的提升和区别

Vue CLI 是 Vue.js 的一个官方脚手架工具，提供了项目初始化、开发服务器启动、构建等功能。但随着项目规模的增大，Vue CLI 在开发服务器启动和热更新方面逐渐显现出性能瓶颈。Vite 的出现正是为了解决这些问题。

性能提升

Vite 相较于 Vue CLI 在性能上有显著提升，主要体现在以下几个方面：

1.开发服务器启动时间：Vite 利用 ES 模块的特性，避免了传统打包工具（如 Webpack）的打包过程，从而使开发服务器的启动时间大大缩短。一个简单的 Vue 项目，Vite 可以在几百毫秒内启动，而 Vue CLI 可能需要几秒钟。

复制代码

# 使用 Vite 启动开发服务器
npm run dev

2. 热更新速度：Vite 的热更新速度几乎是实时的，因为它仅重新加载发生变化的模块。而 Vue CLI 在进行热更新时，可能需要重新打包整个应用，导致更新速度较慢。

复制代码

// 在 Vite 项目中，热更新通常是自动处理的
// 你不需要编写额外的代码

使用 Vite 创建 Vue 项目

要使用 Vite 创建一个 Vue 3 项目，只需简单的几步：

1.安装 Vite：首先，你需要全局安装 Vite。

复制代码

npm install -g create-vite

2.创建项目：使用 Vite 创建一个 Vue 3 项目。

复制代码

npm init vite@latest my-vue-app --template vue

3.安装依赖：进入项目目录并安装依赖。

复制代码

cd my-vue-app
npm install

4.启动开发服务器：启动 Vite 开发服务器。

复制代码

npm run dev

Vue CLI 与 Vite 的代码对比

Vite的项目结构

复制代码

my-vue-app/
├── node_modules/
├── public/
│   ├── favicon.ico
│   └── index.html
├── src/
│   ├── assets/
│   │   └── logo.png
│   ├── components/
│   │   └── HelloWorld.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   ├── main.js
│   └── router/
│       └── index.js
├── .gitignore
├── babel.config.js
├── package.json
├── README.md
├── vue.config.js
└── yarn.lock or package-lock.json

目录/文件	说明
`node_modules/`	存放项目的所有依赖包，由 npm 或 yarn 自动生成和管理。
`public/`	静态文件目录，里面的文件不会被 Webpack 处理，最终会原样复制到打包目录下。
`public/favicon.ico`	网站的图标。
`public/index.html`	应用的主 HTML 文件，Vue CLI 会在构建时自动注入生成的静态资源链接。
`src/`	源代码目录，存放应用的主要代码。
`src/assets/`	存放静态资源，如图像、字体等。这些文件会由 Webpack 处理，可以通过相对路径引用。
`src/assets/logo.png`	示例图像文件。
`src/components/`	存放 Vue 组件，每个组件都是一个独立的 `.vue` 文件。
`src/components/HelloWorld.vue`	默认生成的示例组件。
`src/views/`	存放视图组件，通常对应路由，每个视图都是一个独立的 `.vue` 文件。
`src/views/Home.vue`	默认生成的主页组件。
`src/router/`	存放路由配置文件。
`src/router/index.js`	路由的配置文件，定义了应用的路由规则。
`src/App.vue`	根组件，整个应用的入口组件。
`src/main.js`	应用的入口文件，负责创建 Vue 实例并挂载到 DOM 上。

Vite 配置

Vite 的配置文件 vite.config.js 允许你进行各种自定义配置。以下是一个简单的配置示例

javascript 复制代码

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    port: 3000,
  },
});

在这个配置中，我们使用了 @vitejs/plugin-vue 插件来支持 Vue 3，并设置了路径别名 @ 指向 /src 目录，以及将开发服务器端口设置为 3000。

Vue CLI 项目结构

使用 Vue CLI 创建的项目结构如下：

复制代码

my-vue-cli-app/
├── node_modules/
├── public/
├── src/
│   ├── assets/
│   ├── components/
│   ├── views/
│   ├── App.vue
│   ├── main.js
├── index.html
├── package.json
├── vue.config.js
└── README.md

Vue CLI 配置

Vue CLI 的配置文件 vue.config.js 允许你进行各种自定义配置。以下是一个简单的配置示例：

javascript 复制代码

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'assets',
  devServer: {
    port: 8080,
  },
};

在这个配置中，我们设置了应用的公共路径、输出目录、静态资源目录，以及开发服务器端口。

深入比较 Vue CLI 和 Vite

开发体验

Vue CLI 在开发模式下使用 Webpack 进行模块打包，这会导致启动时间较长，尤其是在大型项目中。尽管 Vue CLI 提供了热模块替换（HMR），但在处理大量文件时，HMR 的性能可能不如 Vite。

Vite 则利用了现代浏览器的原生 ES 模块支持，避免了打包过程，从而实现了极快的开发服务器启动时间和即时热更新。这种开发体验的提升对于开发者来说是非常显著的。

构建速度

在生产环境中，Vue CLI 使用 Webpack 进行构建，这通常需要较长的时间，尤其是在大型项目中。Webpack 的构建过程包括代码分割、压缩、Tree-shaking 等，虽然功能强大，但速度相对较慢。

Vite 在生产环境中使用 Rollup 进行构建，Rollup 以高效和快速著称。Vite 的生产构建速度通常比 Vue CLI 快，尤其是在大型项目中。

插件生态

Vue CLI 拥有丰富的插件生态系统，提供了大量的官方和社区插件，可以满足各种开发需求。Vue CLI 的插件系统基于 Webpack，因此可以集成各种 Webpack 插件。

Vite 也有一个不断增长的插件生态系统，支持 Vue、React、Svelte 等多种框架。Vite 的插件系统设计得非常灵活，允许开发者根据需要扩展构建过程。

代码示例

Vue CLI 项目

复制代码

# 使用 Vue CLI 创建项目
vue create my-vue-cli-app

# 进入项目目录
cd my-vue-cli-app

# 启动开发服务器
npm run serve

Vite 项目

复制代码

# 使用 Vite 创建项目
npm init vite@latest my-vue-app --template vue

# 进入项目目录
cd my-vue-app

# 安装依赖
npm install

# 启动开发服务器
npm run dev

Vue CLI 配置文件

javascript 复制代码

// vue.config.js
module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'assets',
  devServer: {
    port: 8080,
  },
};

Vite 配置文件

javascript 复制代码

// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': '/src',
    },
  },
  server: {
    port: 3000,
  },
});

生产构建

Vue CLI 生产构建

复制代码

# 使用 Vue CLI 进行生产构建
npm run build

Vite 生产构建

复制代码

# 使用 Vite 进行生产构建
npm run build

热模块替换（HMR）

Vue CLI HMR

Vue CLI 使用 Webpack 的 HMR 机制，虽然功能强大，但在处理大量文件时可能会出现延迟

javascript 复制代码

// src/main.js
if (module.hot) {
  module.hot.accept();
}

Vite HMR

Vite 的 HMR 几乎是即时的，因为它仅重新加载发生变化的模块，而不需要重新打包整个应用。

复制代码

// src/main.js
// Vite 的 HMR 是自动处理的，无需额外配置

性能对比

启动时间

Vue CLI：通常需要几秒钟到几十秒，取决于项目规模。
Vite：通常只需几百毫秒，显著快于 Vue CLI。

构建时间

Vue CLI：通常需要几十秒到几分钟，取决于项目规模。
Vite：通常比 Vue CLI 快，尤其是在大型项目中。

总结

Vite 和 Vue CLI 都是优秀的前端构建工具，但它们在设计和使用场景上有所不同。Vite 利用现代浏览器的原生 ES 模块支持，提供了极快的开发体验，尤其适合需要快速迭代和热更新的小型到中型项目。Vue CLI 则更适合需要复杂构建流程和丰富插件生态的大型项目。

对于新项目，特别是小型到中型项目，强烈推荐使用 Vite，以获得更好的开发体验和性能提升。对于大型项目，特别是那些已经使用 Vue CLI 且依赖于其丰富插件生态的项目，继续使用 Vue CLI 可能是更合适的选择。