【愚公系列】《循序渐进Vue.js 3.x前端开发实践》042-Vite工具入门

🚀前言

在快速发展的前端开发领域，构建工具的选择对开发效率和项目性能至关重要。Vite 作为一个新兴的前端构建工具，以其极快的启动速度和高效的热更新功能，迅速赢得了开发者的青睐。无论是小型项目还是大型应用，Vite 都能为开发者提供流畅的开发体验和强大的功能支持。

本篇文章旨在帮助你快速入门 Vite 工具。我们将从 Vite 的基本概念出发，介绍其安装过程以及如何使用 Vite 创建一个全新的项目。通过详细的步骤和示例，你将学习到如何配置开发环境、使用 Vite 的插件系统、处理静态资源，以及如何在生产环境中进行构建和部署。

🚀一、Vite工具入门

Vite 是一个新一代的前端构建工具，由 Evan You（Vue 的作者）开发，专为现代浏览器设计，具有超快的开发启动速度和优化的生产构建。Vite 的最大特点是它通过原生的 ES 模块来加速开发过程，减少了传统构建工具的打包时间。

在这篇指南中，我将介绍如何使用 Vite 快速创建一个项目，以及如何配置和使用它。

🔎1. 安装 Vite

Vite 是基于 Node.js 的工具，所以在安装之前，你需要确保已安装 Node.js 和 npm（或者 Yarn）包管理工具。你可以通过以下命令检查是否已经安装：

node -v
npm -v

如果没有安装 Node.js，可以前往 Node.js 官方网站 下载并安装。

🦋1.1 安装 Vite

Vite 可以通过 npm 或 yarn 安装。推荐使用以下命令通过 npm 安装并初始化一个新项目。

npm create vite@latest

这条命令会提示你选择一个模板，Vite 提供了几种不同的模板，比如 Vue、React、Vanilla（原生 JavaScript）等。选择你需要的模板后，Vite 会自动创建并初始化项目。

例如：

? Select a framework: » - Use arrow-keys. Return to submit.
  vanilla
  vue
  react
  preact
  lit
  svelte

你可以选择 Vue、React 或 Vanilla，然后 Vite 会自动为你创建相应的项目。

🦋1.2 进入项目目录

创建完成后，进入项目目录并安装依赖：

cd vite-project
npm install

🦋1.3 启动开发服务器

安装依赖后，使用以下命令启动开发服务器：

npm run dev

默认情况下，开发服务器会启动在 http://localhost:5173。你可以在浏览器中访问这个地址，看到你创建的项目。

🔎2. 项目结构概览

Vite 创建的项目结构通常如下所示：

vite-project/
├── node_modules/          # 存放项目的所有依赖包
├── public/                # 公共资源，直接放置静态文件
│   └── index.html         # HTML 模板文件
├── src/                   # 源代码
│   ├── assets/            # 静态资源，如图片等
│   ├── main.js            # 入口文件，通常是应用的初始化文件
│   └── App.vue            # 如果是 Vue 项目，这是根组件
├── index.html             # 入口 HTML 文件
├── package.json           # 项目描述文件
├── vite.config.js         # Vite 配置文件
├── .gitignore             # Git 忽略文件
└── README.md              # 项目说明文件

🦋2.1 重要文件说明

• src/main.js：这是你的应用入口文件，Vite 会在此文件启动应用。
• public/index.html：这是应用的 HTML 模板文件，Vite 会将根组件挂载到此模板中的 #app 元素上。
• vite.config.js：Vite 的配置文件，可以在这里自定义开发服务器、插件、构建选项等。
• package.json：存放项目依赖和脚本命令的配置文件。

🔎3. Vite 配置

Vite 默认开箱即用，并提供了非常高效的开发体验，但你也可以通过 vite.config.js 文件进行定制。以下是一些常见的配置选项：

🦋3.1 创建 vite.config.js

在项目根目录下创建一个 vite.config.js 文件，Vite 会自动读取该文件。

import { defineConfig } from 'vite'

export default defineConfig({
  base: './',   // 设置公共路径
  server: {
    port: 3000,  // 设置开发服务器端口
    open: true,  // 启动时自动打开浏览器
  },
  build: {
    outDir: 'dist', // 构建输出目录
  }
})

🦋3.2 配置开发服务器

Vite 提供了许多开发服务器相关的配置项。比如，你可以设置服务器端口、代理、热重载等：

server: {
  port: 8080,      // 设置开发服务器端口
  open: true,      // 启动时自动打开浏览器
  proxy: {         // 配置请求代理
    '/api': 'http://localhost:5000'
  },
}

🦋3.3 配置别名

在 Vite 中，你可以使用 resolve.alias 来配置模块路径的别名，减少相对路径的引用。

import { defineConfig } from 'vite'

export default defineConfig({
  resolve: {
    alias: {
      '@': '/src'  // 设置 @ 为 src 的别名
    }
  }
})

这样，你就可以在代码中通过 @ 来引用 src 目录下的文件：

import MyComponent from '@/components/MyComponent.vue'

🔎4. 开发功能

🦋4.1 热模块替换（HMR）

Vite 使用原生的 ES 模块，在开发过程中，支持热模块替换（HMR）。当你修改代码时，Vite 会实时更新浏览器中的模块，而不需要完全刷新页面，从而极大地提高开发效率。

🦋4.2 快速构建和启动

Vite 启动非常快，因为它不进行传统的打包构建，而是通过 按需编译 来提供开发体验。Vite 仅在访问文件时将其编译和处理，极大地缩短了开发服务器的启动时间。

🦋4.3 支持 TypeScript 和 JSX

Vite 默认支持 TypeScript 和 JSX。如果你选择了 Vue 或 React 模板，Vite 会自动处理相关的配置。你只需要在项目中使用 TypeScript 或 JSX 文件，Vite 会在开发过程中正确处理。

🔎5. 生产环境构建

Vite 提供了内置的生产环境构建功能，使用的是 ESBuild 来进行快速打包。你可以通过以下命令进行生产环境构建：

npm run build

这个命令会使用 Vite 打包你的项目，并生成优化过的生产版本。默认情况下，打包后的文件会输出到 dist/ 目录中。

🦋5.1 配置生产构建

在 vite.config.js 中，你可以定制生产构建的行为，比如：

• 输出目录：outDir 指定构建的输出目录。
• 压缩选项：可以开启或关闭构建时的代码压缩。
• 公共路径：base 用于设置构建的公共路径。

例如，以下是一个生产构建配置：

export default defineConfig({
  build: {
    outDir: 'dist', // 构建输出目录
    minify: true,   // 开启代码压缩
    assetsDir: 'assets', // 指定资源文件的存放目录
    sourcemap: true, // 生成源码映射文件
  }
})

🔎6. 插件系统

Vite 提供了非常灵活的插件机制，支持在构建过程中进行扩展。你可以使用官方插件，或者自己编写插件来定制构建过程。

例如，Vite 提供了以下常见的官方插件：

• @vitejs/plugin-vue：用于处理 Vue 文件。
• @vitejs/plugin-react：用于处理 React 文件。
• vite-plugin-pages：用于自动生成 Vue Router 页面。

你可以通过 npm 或 yarn 安装插件：

npm install @vitejs/plugin-vue

然后在 vite.config.js 中引入并配置插件：

import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()]
})

🔎7. 总结

Vite 是一个极其快速且现代的前端构建工具，适用于开发现代 Web 应用。通过使用 Vite，你可以享受：

• 极速启动和热模块替换（HMR），提升开发体验。
• 默认支持 Vue、React、TypeScript 等，减少了配置工作。
• 通过原生 ES 模块加速构建，避免了传统构建工具的瓶颈。
• 插件化扩展，可以轻松集成其他功能。

Vite 的构建速度和简洁性使得它成为现代 Web 项目的首选构建工具，尤其适合中大型项目或需要高效开发体验的团队。