03｜从Rollup到Vite：如何用Vite构建你的Vue 3项目？-Vue3企业级项目实战 - 码小课 - 程序员在线学习平台

当前位置:　首页>> 技术小册>> Vue3企业级项目实战

### 03｜从Rollup到Vite：如何用Vite构建你的Vue 3项目？

在前端工程化日益成熟的今天，构建工具的选择对于项目的开发效率、性能优化及团队协作至关重要。随着Vue 3的发布，社区中涌现出众多与之适配的现代化构建工具，其中Vite以其极速的冷启动、即时的模块热更新（HMR）以及原生支持ES模块导入的特性，迅速成为Vue 3项目构建的首选方案之一。本章将深入探讨如何从传统的构建工具（如Rollup）过渡到Vite，并详细指导你如何使用Vite来搭建一个高效的Vue 3项目。

#### 一、Vite简介与优势

**1.1 Vite基础**

Vite是一个由Vue.js作者尤雨溪（Evan You）开发的前端构建工具，它利用原生ES模块导入能力，在开发环境下提供极快的冷启动速度和即时模块热更新，而在生产环境下则利用Rollup进行打包优化。Vite的出现，旨在解决现代前端项目在开发初期面临的加载速度慢、构建过程复杂等问题。

**1.2 Vite相比Rollup及Webpack的优势**

- **极速的冷启动**：Vite通过原生ESM支持，仅启动服务器和必要的插件，无需像Webpack那样进行复杂的构建过程，从而实现了近乎即时的项目启动。
- **即时的模块热更新**：Vite的HMR功能能够在不刷新页面的情况下，实时更新修改的代码，极大提升了开发效率。
- **轻量级与高性能**：Vite在生产环境下使用Rollup进行打包，保留了Rollup在代码分割、摇树优化等方面的优势，同时避免了Webpack的复杂配置和性能开销。
- **插件生态丰富**：虽然Vite相对较新，但其社区发展迅速，已经拥有了一套丰富的插件体系，支持多种框架和库。

#### 二、Vite与Vue 3的结合

**2.1 Vue 3对Vite的支持**

Vue 3从设计之初就考虑到了与Vite的集成，官方推荐的Vue CLI插件`@vitejs/plugin-vue`能够无缝集成Vue 3项目，使得开发者可以享受到Vite带来的所有优势。

**2.2 搭建Vue 3 + Vite项目**

**步骤一：安装Node.js和npm/yarn**

确保你的开发环境中安装了最新版本的Node.js和npm或yarn。Node.js是运行Vite的基础，npm/yarn则是管理项目依赖的工具。

**步骤二：使用Vite创建Vue 3项目**

你可以使用Vite提供的官方脚手架来快速创建一个Vue 3项目。打开终端或命令提示符，运行以下命令：

```bash
npm create vite@latest my-vue-app -- --template vue
# 或者使用yarn
yarn create vite my-vue-app --template vue
```

这里`my-vue-app`是你的项目名称，`--template vue`指定了使用Vue模板来创建项目。执行完毕后，你会得到一个预配置了Vue 3和Vite的项目结构。

**步骤三：进入项目并安装依赖**

```bash
cd my-vue-app
npm install
# 或者使用yarn
yarn
```

**步骤四：启动项目**

```bash
npm run dev
# 或者使用yarn
yarn dev
```

此时，Vite将启动开发服务器，并自动打开浏览器访问`http://localhost:3000/`，你将看到Vue 3的欢迎页面。

#### 三、Vite配置详解

**3.1 Vite配置文件**

Vite项目的核心配置文件是`vite.config.js`（或`vite.config.ts`如果你使用TypeScript）。在这个文件中，你可以配置Vite的各种选项，如服务器设置、插件配置、别名设置等。

**3.2 常用配置项**

- **server**：用于配置开发服务器的选项，如端口号、代理设置、HTTPS支持等。
- **build**：用于配置生产环境下的打包选项，如输出目录、资源命名规则、压缩等。
- **resolve.alias**：配置模块别名，方便在项目中引用路径较长的模块。
- **plugins**：配置Vite插件，这些插件可以扩展Vite的功能，如支持TypeScript、Vue等。

**示例配置**：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true,
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },
  build: {
    outDir: 'dist',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
  },
  resolve: {
    alias: {
      '@': '/src'
    }
  }
});
```

#### 四、进阶使用Vite

**4.1 使用Vite插件**

Vite拥有丰富的插件生态，你可以通过安装第三方插件来扩展Vite的功能。例如，`vite-plugin-compression`插件可以用于在生产构建时压缩资源，`vite-plugin-pwa`插件可以帮助你快速构建PWA应用。

**4.2 环境变量与模式**

Vite支持通过`.env`文件来管理环境变量，你可以根据开发、测试、生产等不同的环境设置不同的变量值。此外，Vite还提供了`mode`选项，允许你根据当前模式（如`development`、`production`）来执行不同的构建逻辑。

**4.3 性能优化**

Vite本身已经做了很多性能优化，但在实际项目中，你可能还需要进行额外的优化，如代码分割、懒加载、预加载等。Vite提供了相应的配置项和插件支持，帮助你轻松实现这些优化。

#### 五、总结

通过本章的学习，我们了解了Vite作为现代前端构建工具的优势，掌握了如何使用Vite来搭建一个Vue 3项目，并对Vite的配置项、插件系统以及进阶使用技巧有了深入的了解。Vite以其极速的启动速度、即时的模块热更新和高效的打包性能，正逐步成为Vue 3项目构建的首选方案。希望你在未来的项目中能够充分利用Vite的这些优势，提升开发效率和项目质量。

该分类下的相关小册推荐：

TypeScript和Vue从入门到精通(一)

TypeScript和Vue从入门到精通(三)

移动端开发指南

Vue.js从入门到精通(二)

vue项目构建基础入门与实战

vuejs组件实例与底层原理精讲

Vue源码完全解析

TypeScript和Vue从入门到精通(四)

VUE组件基础与实战

Vue.js从入门到精通(三)

Vue3技术解密

Vue原理与源码解析