Vite入门指南

一、什么是Vite?

Vite(法语意为"快速")是由Vue作者尤雨溪开发的新型前端构建工具。它基于原生ES模块(ESM)实现,具有以下核心优势:

  • 极速启动:冷启动时间比Webpack快10-100倍
  • 闪电般的热更新:HMR(热模块替换)保持应用状态
  • 开箱即用的支持:TypeScript、JSX、CSS预处理等
  • 灵活的扩展:通过插件支持Rollup生态系统

二、环境准备

确保已安装:

  • Node.js 14.18+ / 16+
  • npm 7+ 或 yarn
bash 复制代码
# 验证安装
node -v
npm -v

三、创建第一个项目

1. 初始化项目

bash 复制代码
npm create vite@latest my-vite-app

选择框架模板(这里以React+TS为例):

复制代码
✔ Select a framework: › React
✔ Select a variant: › TypeScript

2. 项目结构

复制代码
my-vite-app/
├── node_modules/
├── public/
│   └── vite.svg
├── src/
│   ├── assets/
│   ├── App.css
│   ├── App.tsx
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── index.html
├── package.json
├── tsconfig.json
└── vite.config.ts

3. 启动开发服务器

bash 复制代码
cd my-vite-app
npm install
npm run dev

访问 http://localhost:5173

四、核心功能实践

1. 模块热替换(HMR)

修改 src/App.tsx

tsx 复制代码
function App() {
  return (
    <div className="App">
      <h1>Hello Vite!</h1>
      <p>Edit and save to see HMR in action</p>
    </div>
  )
}

保存后浏览器立即更新,无需刷新页面

2. CSS处理

创建 src/Button.module.css

css 复制代码
.primary {
  background: #646cff;
  color: white;
  padding: 12px 24px;
  border-radius: 4px;
}

在组件中使用:

tsx 复制代码
import styles from './Button.module.css'

function Button() {
  return <button className={styles.primary}>Click Me</button>
}

3. 静态资源处理

tsx 复制代码
// 直接引入图片
import logo from './assets/react.svg'

function Logo() {
  return <img src={logo} alt="React logo" />
}

五、Vite配置详解

修改 vite.config.ts

typescript 复制代码
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

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

六、插件系统

1. 常用插件示例

安装官方React插件:

bash 复制代码
npm install @vitejs/plugin-react -D

配置插件:

typescript 复制代码
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: ['babel-plugin-styled-components']
      }
    })
  ]
})

2. 社区插件示例(以SVG转换为例)

bash 复制代码
npm install vite-plugin-svgr -D

配置:

typescript 复制代码
import svgr from 'vite-plugin-svgr'

export default defineConfig({
  plugins: [
    svgr({
      svgrOptions: {
        icon: true
      }
    })
  ]
})

使用SVG组件:

tsx 复制代码
import { ReactComponent as Logo } from './logo.svg'

function App() {
  return <Logo />
}

七、生产构建

bash 复制代码
npm run build

生成优化后的静态文件:

复制代码
dist/
├── static/
│   ├── js/
│   ├── css/
│   └── assets/
└── index.html

八、环境变量

1. 创建环境文件

复制代码
.env                # 所有情况
.env.local          # 本地覆盖,git忽略
.env.development    # 开发环境
.env.production     # 生产环境

2. 定义变量(前缀必须为VITE_)

env 复制代码
VITE_API_URL=https://api.example.com

3. 使用变量

tsx 复制代码
console.log(import.meta.env.VITE_API_URL)

九、与Webpack的主要差异

特性 Vite Webpack
启动时间 毫秒级 随着项目增长变慢
构建方式 ESM原生模块 Bundle打包
HMR速度 保持状态快速更新 需要重建模块
配置复杂度 简单 相对复杂
生态 快速成长 成熟

十、完整示例代码

查看GitHub仓库:

bash 复制代码
git clone https://github.com/vitejs/vite-template-react.git

十一、最佳实践

  1. 按需加载:使用动态import实现代码分割
  2. 缓存策略:配置合理的hash文件名
  3. 性能优化 :使用 vite-plugin-compression 进行Gzip压缩
  4. 类型安全:充分利用TypeScript类型检查
  5. SSR支持:结合vite-ssr插件实现服务端渲染
相关推荐
洛小豆3 分钟前
深入理解Pinia:Options API vs Composition API两种Store定义方式完全指南
前端·javascript·vue.js
洛小豆13 分钟前
JavaScript 对象属性访问的那些坑:她问我为什么用 result.id 而不是 result['id']?我说我不知道...
前端·javascript·vue.js
叹一曲当时只道是寻常17 分钟前
Softhub软件下载站实战开发(十六):仪表盘前端设计与实现
前端·golang
超级土豆粉22 分钟前
npm 包 scheduler 介绍
前端·npm·node.js
bug爱好者23 分钟前
原生小程序如何实现跨页面传值
前端·javascript
随笔记25 分钟前
uniapp开发的小程序输入框在ios自动填充密码,如何欺骗苹果手机不让自动填充
前端·ios·app
bug爱好者31 分钟前
原生微信小程序最实用的工具函数合集
前端·javascript
3Katrina35 分钟前
JS事件机制详解(2)--- 委托机制、事件应用
前端·javascript·面试
Allen Bright40 分钟前
【CSS-15】深入理解CSS transition-duration:掌握过渡动画的时长控制
前端·css
张鑫旭41 分钟前
40岁老前端2025年上半年都学了什么?
前端