【前端知识】Vite用法从入门到实战

问道飞鱼2026-02-13 22:34

Vite用法从入门到实战

一、Vite简介：为什么选择Vite？

Vite（法语"快速"）是由尤雨溪团队开发的下一代前端构建工具，核心优势：

  • 极速冷启动：基于原生ES模块（ESM），开发服务器启动时间比Webpack快10-100倍；
  • 按需编译：仅编译当前页面用到的模块，热更新（HMR）毫秒级响应；
  • 开箱即用：内置对TypeScript、JSX、CSS预处理器（Sass/Less）、静态资源的支持；
  • 插件生态丰富：兼容Rollup插件，支持自定义扩展（如PWA、SSR）。

适用场景：中小型项目快速开发、大型项目模块化构建、现代框架（Vue/React/Svelte）工程化。

二、环境准备与项目创建
1. 环境要求
  • Node.js ≥ 18.0.0（Vite 5+要求，推荐LTS版本）；
  • 包管理器：npm/yarn/pnpm（推荐pnpm，速度快、磁盘占用低）。
2. 项目创建（以Vue3为例）

步骤1：初始化项目

打开终端，执行以下命令（以pnpm为例，npm/yarn替换对应命令即可）：

bash 复制代码 
# 创建项目（选择vue模板，TypeScript版本）
pnpm create vite@latest todo-vite-app -- --template vue-ts

# 进入项目目录
cd todo-vite-app

# 安装依赖
pnpm install

# 启动开发服务器（默认端口5173）
pnpm dev
  • 执行后，浏览器自动打开 http://localhost:5173，显示Vite+Vue3默认页面，即项目创建成功。
3. 目录结构解析

生成的项目结构如下（核心文件/目录）：

复制代码 
todo-vite-app/  
├── node_modules/       # 依赖包  
├── public/             # 静态资源（直接复制，不经过Vite处理）  
│   └── favicon.ico  
├── src/                # 源代码目录  
│   ├── assets/         # 静态资源（图片、字体等，会被Vite处理）  
│   ├── components/     # 组件目录  
│   ├── App.vue         # 根组件  
│   ├── main.ts         # 入口文件  
│   └── style.css       # 全局样式  
├── index.html          # HTML入口（Vite以HTML为入口，非JS）  
├── package.json        # 项目配置与脚本  
├── tsconfig.json       # TypeScript配置  
├── vite.config.ts      # Vite核心配置文件（重点）  
└── .gitignore
三、基础配置：vite.config.ts详解

Vite的核心配置文件是 vite.config.ts（TypeScript）或 vite.config.js（JavaScript），用于自定义构建行为。以下是基础配置模板及关键选项说明：

typescript 复制代码 
// vite.config.ts  
import { defineConfig } from 'vite'  
import vue from '@vitejs/plugin-vue'  // Vue3插件（必装）  
import path from 'path'  // 用于处理路径别名  

export default defineConfig({  
  plugins: [vue()],  // 注册插件（Vue3必需）  
  resolve: {  
    alias: {  // 路径别名（简化导入）  
      '@': path.resolve(__dirname, './src'),  // @ 指向 src 目录  
    },  
  },  
  server: {  // 开发服务器配置  
    port: 5173,  // 端口（默认5173）  
    open: true,  // 自动打开浏览器  
    proxy: {  // 代理配置（解决跨域）  
      '/api': {  
        target: 'http://localhost:3000',  // 后端API地址  
        changeOrigin: true,  // 允许跨域  
        rewrite: (path) => path.replace(/^\/api/, ''),  // 去掉/api前缀  
      },  
    },  
  },  
  build: {  // 构建配置  
    outDir: 'dist',  // 输出目录（默认dist）  
    sourcemap: false,  // 生产环境关闭sourcemap（减小体积）  
  },  
})

关键配置项：

  • plugins：注册插件（如Vue/React插件、PWA插件 vite-plugin-pwa）；
  • resolve.alias：设置路径别名（如 @/components/HelloWorld 代替 ../../components/HelloWorld）；
  • server.proxy：开发环境代理（解决前后端分离跨域问题）；
  • build：生产构建配置（输出目录、代码压缩、分块策略等）。
四、核心功能：开发到构建全流程
1. 开发服务器与热更新（HMR）
  • 启动开发服务器 ：pnpm dev，Vite会：
    • 启动基于ESM的开发服务器（无需打包）；
    • 监听文件变化，触发热更新（HMR）：修改组件代码后，页面局部更新，状态不丢失。
  • HMR优势：相比Webpack的全量更新，Vite的HMR只更新修改的模块，速度极快（实测修改单文件更新时间<100ms）。
2. 静态资源处理

  • 图片/字体 ：放在 src/assets 目录，导入时使用相对路径，Vite会自动处理（小图转base64，大图输出到dist/assets）；

    vue 复制代码 
    <!-- 在Vue组件中导入图片 -->  
<img src="@/assets/logo.png" alt="Logo">

  • JSON文件 ：直接导入为对象；

    typescript 复制代码 
    import data from '@/data/todos.json'  
console.log(data.todos)  // 直接使用JSON数据
3. CSS预处理器支持（Sass/Less）

Vite内置对Sass/Less/Stylus的支持，无需额外配置，直接安装预处理器即可：

bash 复制代码 
# 安装Sass  
pnpm add sass -D

在Vue组件中使用：

vue 复制代码 
<style lang="scss" scoped>  <!-- 声明lang="scss" -->  
$primary-color: #42b983;  
.todo-item {  
  color: $primary-color;  
}  
</style>
五、高级特性：插件、多环境与性能优化
1. 插件生态（以常用插件为例）
  • Vue Router：路由管理（需手动安装）；
  • Pinia：状态管理（Vue3推荐，替代Vuex）；
  • Axios：HTTP请求；
  • vite-plugin-pwa：PWA支持（离线访问）；
  • unplugin-auto-import：自动导入API（如Vue的ref/reactive、Pinia的defineStore）。

安装示例（Vue Router + Pinia）：

bash 复制代码 
pnpm add vue-router@4 pinia axios
2. 多环境配置

Vite支持通过 .env 文件定义环境变量，区分开发/测试/生产环境：

  • .env.development（开发环境，默认加载）；
  • .env.production（生产环境，pnpm build 时加载）；
  • .env.local（本地私有环境，不提交Git）。

示例（.env.development）：

env 复制代码 
VITE_API_BASE_URL=/api  # 开发环境API前缀（配合server.proxy）  
VITE_APP_TITLE=TodoApp-Dev

在代码中通过 import.meta.env 访问：

typescript 复制代码 
const apiUrl = import.meta.env.VITE_API_BASE_URL  // "/api"
3. 性能优化
  • 代码分割 ：Vite默认按路由分割代码（build.rollupOptions 自定义）；
  • 压缩优化 ：生产构建默认启用Terser压缩JS/CSS，可通过 build.minify: 'esbuild' 切换为更快的esbuild（压缩速度提升10倍）；
  • 图片压缩 ：安装 vite-plugin-imagemin 压缩图片；
  • CDN引入 ：通过 build.rollupOptions.external 排除大型库（如lodash），用CDN引入。
六、完整实操案例：Vue3+Vite构建"待办事项应用"

以下以"待办事项应用"为例，覆盖组件开发→路由→状态管理→API请求→构建部署全流程。

步骤1：项目初始化与依赖安装

按前文"项目创建"步骤，创建 todo-vite-app 项目（Vue3+TS模板），安装依赖：

bash 复制代码 
pnpm add vue-router@4 pinia axios  
pnpm add sass -D  # 安装Sass
步骤2：目录结构调整
复制代码 
src/  
├── api/           # API请求封装  
│   └── todo.ts  
├── components/     # 组件  
│   ├── TodoList.vue  
│   └── TodoForm.vue  
├── router/         # 路由  
│   └── index.ts  
├── store/          # Pinia状态管理  
│   └── todoStore.ts  
├── views/          # 页面视图  
│   ├── HomeView.vue  
│   └── AboutView.vue  
├── App.vue  
└── main.ts
步骤3：核心代码实现
（1）状态管理（Pinia）：store/todoStore.ts
typescript 复制代码 
import { defineStore } from 'pinia'  
import { getTodos, addTodo, deleteTodo } from '@/api/todo'  

export const useTodoStore = defineStore('todo', {  
  state: () => ({  
    todos: [] as Array<{ id: number; text: string; done: boolean }>,  
    loading: false,  
  }),  
  actions: {  
    async fetchTodos() {  
      this.loading = true  
      try {  
        const res = await getTodos()  
        this.todos = res.data  
      } finally {  
        this.loading = false  
      }  
    },  
    async addTodo(text: string) {  
      const res = await addTodo(text)  
      this.todos.push(res.data)  
    },  
    async removeTodo(id: number) {  
      await deleteTodo(id)  
      this.todos = this.todos.filter(todo => todo.id !== id)  
    },  
  },  
})
（2）API请求封装：api/todo.ts
typescript 复制代码 
import axios from 'axios'  

const api = axios.create({  
  baseURL: import.meta.env.VITE_API_BASE_URL,  // 从环境变量获取  
  timeout: 5000,  
})  

// 模拟后端API（实际项目中替换为真实接口）  
export const getTodos = () => api.get('/todos')  
export const addTodo = (text: string) => api.post('/todos', { text })  
export const deleteTodo = (id: number) => api.delete(`/todos/${id}`)
（3）路由配置：router/index.ts
typescript 复制代码 
import { createRouter, createWebHistory } from 'vue-router'  
import HomeView from '@/views/HomeView.vue'  
import AboutView from '@/views/AboutView.vue'  

const routes = [  
  { path: '/', component: HomeView },  
  { path: '/about', component: AboutView },  
]  

export default createRouter({  
  history: createWebHistory(),  
  routes,  
})
（4）组件开发：components/TodoForm.vue（添加待办）
vue 复制代码 
<template>  
  <form @submit.prevent="handleSubmit">  
    <input v-model="text" placeholder="输入待办事项" />  
    <button type="submit">添加</button>  
  </form>  
</template>  

<script setup lang="ts">  
import { ref } from 'vue'  
import { useTodoStore } from '@/store/todoStore'  

const text = ref('')  
const todoStore = useTodoStore()  

const handleSubmit = async () => {  
  if (text.value.trim()) {  
    await todoStore.addTodo(text.value.trim())  
    text.value = ''  
  }  
}  
</script>
（5）入口文件：main.ts
typescript 复制代码 
import { createApp } from 'vue'  
import { createPinia } from 'pinia'  
import App from './App.vue'  
import router from './router'  
import './style.scss'  // 全局样式  

const app = createApp(App)  
app.use(createPinia())  
app.use(router)  
app.mount('#app')
步骤4：开发与构建
  • 启动开发服务器 ：pnpm dev，访问 http://localhost:5173，修改代码体验HMR；
  • 生产构建 ：pnpm build，Vite会：
    • 编译TypeScript、Vue SFC；
    • 压缩JS/CSS，分割代码（按路由）；
    • 输出到 dist 目录（含index.html、JS/CSS/图片等资源）。
步骤5：部署

构建后的 dist 目录是静态资源，可通过以下方式部署：

  • 本地预览 ：pnpm preview（Vite内置预览服务器）；
  • Nginx部署 ：将 dist 目录放入Nginx的 html 目录，配置Nginx反向代理（如有API请求）；
  • 静态托管：上传至GitHub Pages、Vercel、Netlify等平台。
七、总结

Vite通过原生ES模块 和按需编译实现了极速开发体验，结合丰富的插件生态，可满足从简单项目到复杂应用的构建需求。核心步骤：

  1. 用 pnpm create vite 创建项目，选对应框架模板；
  2. 通过 vite.config.ts 配置别名、代理、构建选项；
  3. 开发时用HMR实时预览，用Pinia/Vue Router管理状态与路由；
  4. 生产构建用 pnpm build 生成优化后的静态资源，部署至任意静态服务器。
相关推荐
爱上妖精的尾巴1 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
Aliex_git3 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习
独泪了无痕3 小时前
useStorage：本地数据持久化利器
前端·vue.js
程序员林北北3 小时前
【前端进阶之旅】JavaScript 一些常用的简写技巧
开发语言·前端·javascript
全栈前端老曹3 小时前
【Redis】Redis 持久化机制 RDB 与 AOF
前端·javascript·数据库·redis·缓存·node.js·全栈
NEXT063 小时前
受控与非受控组件
前端·javascript·react.js
NEXT063 小时前
防抖（Debounce）与节流（Throttle）解析
前端·javascript·面试
mqiqe4 小时前
pnpm 和npm 有什么区别？
前端·npm·node.js
Swift社区5 小时前
React 项目生产环境构建与静态资源优化
前端·react.js·前端框架
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03UV安装并设置国内源04openClaw安装飞书插件｜核心踩坑：spawn EINVAL 错误终极解决指南05243 行 microGPT：把“训练 + 推理”拆到骨头里06openclaw 配置飞书 报错 应用未建立长连接07AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南08MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法09Anthropic破解长程任务难题：长期运行智能体的高效控制机制10openclaw配置教程（linux+局域网ollama）