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项目。打开终端或命令提示符，运行以下命令：

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的项目结构。

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

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

步骤四：启动项目

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等。

示例配置：

// 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的这些优势，提升开发效率和项目质量。