Vite 前端构建工具

什么是 Vite？

Vite 是一个现代化的前端构建工具，它利用了现代浏览器的原生 ES 模块支持，为开发提供了极快的冷启动速度。与传统的打包工具不同，Vite 在开发环境中不需要打包，而是直接利用浏览器的 ES 模块加载机制。

1. 极快的开发服务器启动

如果你曾经因为 Vue CLI 项目启动缓慢而苦恼，Vite 将彻底改变你的体验。传统的构建工具需要在启动前打包整个应用，而 Vite 只需要启动开发服务器，无论项目多大，启动时间基本保持在秒级。

2. 闪电般的热更新

Vite 的热更新（HMR）速度快得令人印象深刻。当你修改代码时，几乎可以立即看到变化，这大大提升了开发效率。

3. 开箱即用的现代功能

• 原生支持 TypeScript
• 内置 CSS 预处理器支持（Sass、Less、Stylus）
• 内置 PostCSS 支持
• 原生支持 JSX
• 内置的构建优化

Vite vs Vue CLI：关键差异

开发模式：

• Vue CLI：基于 Webpack，需要打包整个应用
• Vite：利用 ES 模块，按需加载

构建速度：

• Vue CLI：项目越大，启动越慢
• Vite：始终保持快速启动

配置复杂度：

• Vue CLI：配置相对复杂，需要了解 Webpack
• Vite：配置简单直观，基于 Rollup

快速开始

一个简单的 Vue 3 + Vite 项目：

# 使用 npm
npm create vite@latest my-vue-app -- --template vue

# 使用 yarn
yarn create vite my-vue-app --template vue

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

# 安装依赖
npm install

# 启动开发服务器
npm run dev

你会发现启动速度比 Vue CLI 快得多！

基本配置

Vite 的配置文件是 vite.config.js，语法简洁明了：

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

export default defineConfig({
  plugins: [vue()],
  server: {
    port: 3000,
    open: true
  },
  build: {
    outDir: 'dist'
  }
})

从 Vue CLI 迁移到 Vite

如果你想将现有的 Vue 2 项目迁移到 Vite，需要注意以下几点：

1. 升级到 Vue 3：Vite 主要面向 Vue 3，虽然有 Vue 2 支持，但建议升级
2. 更新依赖：移除 Vue CLI 相关依赖，添加 Vite 依赖
3. 调整配置：将 vue.config.js 配置迁移到 vite.config.js
4. 更新构建脚本：修改 package.json 中的脚本命令