Vue3 + Vite 使用详解：从入门到实战优化
一、Vite 与 Vue3 概述
1.1 什么是 Vite
Vite（法语意为"快速"）是一种新型前端构建工具，由 Vue.js 作者尤雨溪开发，能够提供更优异的开发体验和性能。Vite 通过利用浏览器原生 ES 模块特性，实现了毫秒级的冷启动和快速的热模块更新。
与传统打包工具（如 Webpack）不同，Vite 在开发环境下不进行打包操作，而是直接通过浏览器解析 <script type="module"> 标签加载模块。根据官方基准测试，这种设计使得冷启动时间缩短了 87%，在典型 Vue 项目中可达到 200ms 级启动速度。
1.2 Vue3 的优势
Vue3 引入了组合式 API（Composition API）、更好的 TypeScript 支持、性能优化等新特性，与 Vite 结合能够打造极速的开发工作流。Vue3 的响应式系统重写、模板编译器优化和更小的打包体积，使其在性能上有显著提升。
二、项目创建与初始化
2.1 创建项目
使用 Vite 创建 Vue3 项目非常简单，只需执行以下命令：
# 使用 npm
npm create vite@latest my-vue-app -- --template vue
# 使用 yarn
yarn create vite my-vue-app --template vue
# 使用 pnpm
pnpm create vite my-vue-app --template vue
执行命令后，你会看到一些可选功能提示，可以根据项目需求进行选择：
✔ Project name: … my-vue-app
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes
2.2 项目结构
项目创建完成后，会生成以下目录结构：
my-vue-app/
├── public/ # 静态资源
├── src/ # 源代码
│ ├── assets/ # 模块资源
│ ├── components/ # Vue 组件
│ ├── App.vue # 根组件
│ └── main.js # 入口文件
├── index.html # 应用入口 HTML
├── package.json
└── vite.config.js # Vite 配置文件
需要注意的是，Vite 的编译入口是一个 HTML 文件，这与传统打包工具不同。在 index.html 中，你会看到通过 ES 模块加载主 JavaScript 文件的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
2.3 启动项目
进入项目目录并安装依赖后，可以启动开发服务器：
cd my-vue-app
npm install
npm run dev
执行后，开发服务器通常会在 http://localhost:5173 启动。
三、Vite 核心配置详解
3.1 基础配置
Vite 的配置文件 vite.config.js 是项目构建的核心，以下是关键配置项：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import path from 'path'
export default defineConfig({
// 项目根目录
root: path.resolve(__dirname, 'src'),
// 部署基础路径
base: '/my-app/',
// 静态资源目录
publicDir: 'static',
// 环境变量目录
envDir: './env',
// 指定运行模式
mode: 'production',
// 插件
plugins: [vue()]
})
关键配置项说明：
root：定义项目源码目录，影响所有路径解析base：重要！影响构建后的资源引用路径（如 CDN 部署）publicDir：存放无需打包的静态资源（如 favicon.ico）
3.2 开发服务器配置
通过配置开发服务器，可以提升调试体验：
export default defineConfig({
server: {
port: 3000,
host: '0.0.0.0', // 允许外网访问
proxy: {
'/api': {
target: 'http://localhost:3001',
changeOrigin: true,
rewrite: path => path.replace(/^\/api/, '')
}
},
open: true, // 启动自动打开浏览器
https: true // 启用 HTTPS 开发环境
}
})
面试考点：
- 代理配置如何解决跨域问题？
host: '0.0.0.0'的作用是什么？
3.3 环境变量管理
在 Vite 项目中，环境变量的管理和使用与 Vue CLI 略有不同。在项目根目录下创建不同的 .env 文件：
.env：适用于所有环境的默认配置.env.development：仅适用于开发环境.env.production：仅适用于生产环境
示例环境文件：
.env 文件：
VITE_APP_TITLE=My Vite App
.env.development 文件：
VITE_APP_API_URL=http://localhost:3000
VITE_APP_DEBUG=true
.env.production 文件：
VITE_APP_API_URL=https://api.example.com
VITE_APP_DEBUG=false
访问环境变量：
在 Vite 项目中，环境变量通过 import.meta.env 来访问。注意：所有自定义环境变量都应该以 VITE_ 前缀开头。
// 在组件或 JavaScript 文件中访问
console.log(import.meta.env.VITE_APP_API_URL)
console.log(import.meta.env.VITE_APP_TITLE)
在 Vue 组件中使用环境变量：
<template>
<div>
<p>API URL: {{ apiUrl }}</p>
<p>App Title: {{ title }}</p>
</div>
</template>
<script>
export default {
setup() {
const apiUrl = import.meta.env.VITE_APP_API_URL
const title = import.meta.env.VITE_APP_TITLE
return { apiUrl, title }
}
}
</script>
3.4 构建配置
生产环境构建配置对应用性能至关重要：
export default defineConfig({
build: {
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 静态资源子目录
assetsInlineLimit: 4096, // 小资源内联阈值
rollupOptions: {
output: {
manualChunks: {
vue: ['vue', 'vue-router', 'pinia'], // 手动拆分第三方依赖
lodash: ['lodash-es']
}
},
external: ['vue'] // 标记外部依赖（通过 CDN 引入）
},
minify: 'terser' // 使用更激进的压缩算法
}
})
优化技巧：
- 通过
manualChunks实现代码分割，减少首屏加载时间 - 使用
external配合 CDN 加速第三方库加载
四、开发环境优化
4.1 依赖预构建
Vite 通过 Esbuild 预构建依赖，这是 Vite 性能优异的关键之一。依赖预构建主要解决：
- CommonJS → ESM 转换：兼容旧版模块
- 依赖合并：减少网络请求量
- 缓存机制：避免重复编译
配置示例：
export default defineConfig({
optimizeDeps: {
include: ['axios', 'lodash-es'], // 强制预构建
exclude: ['@vue/compiler-dom'] // 排除预构建
}
})
面试问题：
- 为什么需要依赖预构建？
- 预构建失败时如何排查？
4.2 HMR 热更新优化
Vite 的热模块替换（HMR）系统基于 ESM 的即时更新能力构建。当文件修改时，Vite 只会重新编译变更的模块并通过 WebSocket 推送更新指令。实测数据显示，在中等规模项目中，Vite 的 HMR 更新速度比 Webpack 快 3-5 倍。
Vite 的 HMR 机制基于原生 ESM，仅更新修改模块，实现：
- 毫秒级更新：无需全量刷新
- 精准更新：仅影响相关模块
HMR API 使用示例：
if (import.meta.hot) {
import.meta.hot.accept('./module.js', (newModule) => {
// 执行模块更新逻辑
})
}
最佳实践：
- 避免在全局作用域修改状态（如 Vuex 的 store）
- 合理拆分组件，控制单个模块体积
五、生产环境优化
5.1 代码分割与懒加载
通过动态导入实现按需加载，可以显著减少首屏加载体积：
// 路由配置示例
import { createRouter, createWebHistory } from 'vue-router'
const router = createRouter({
history: createWebHistory(),
routes: [
{
path: '/dashboard',
component: () => import('./views/Dashboard.vue') // 懒加载
}
]
})
在 Vue 组件中使用异步组件：
import { defineAsyncComponent } from 'vue'
// 动态导入组件
const AsyncComponent = defineAsyncComponent(() =>
import('./components/AsyncComponent.vue')
)
优化效果：
- 减少首屏加载体积
- 提升页面初始加载速度
5.2 资源压缩与优化
启用资源压缩可以显著减小打包体积：
import viteImagemin from 'vite-plugin-imagemin'
export default defineConfig({
plugins: [
viteImagemin({
gifsicle: { optimizationLevel: 3 },
mozjpeg: { quality: 80 }
})
]
})
5.3 第三方库按需加载与自动导入
通过配置 unplugin-auto-import 和 unplugin-vue-components，可以实现 API 和组件的自动导入，提高开发效率：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ArcoResolver } from 'unplugin-vue-components/resolvers'
export default defineConfig({
plugins: [
vue(),
AutoImport({
// 需要去解析的文件
include: [
/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx
/\.vue$/, /\.vue\?vue/, // .vue
/\.md$/ // .md
],
// imports 指定自动引入的包位置（名）
imports: ['vue', 'pinia', 'vue-router'],
// 生成相应的自动导入json文件
eslintrc: {
enabled: true,
filepath: './.eslintrc-auto-import.json',
globalsPropValue: true
},
resolvers: [ArcoResolver()]
}),
Components({
// imports 指定组件所在目录，默认为 src/components
dirs: ['src/components/', 'src/view/'],
resolvers: [
ArcoResolver({
sideEffect: true
})
]
})
]
})
配置完成后，就可以直接在组件中使用 Vue API 和第三方库组件，无需手动导入：
<script setup>
// 无需手动导入 ref，已自动导入
const count = ref(0)
const handleClickMini = () => {
// AMessage 已自动导入
AMessage.info('hello isboyjc, click mini AButton!')
}
</script>
<template>
<div>hello isboyjc, This is toolsdog home page!</div>
<!-- AButton 和 ASpace 组件已自动导入 -->
<a-space>
<a-button type="primary" size="mini" @click="handleClickMini">Mini</a-button>
<a-button type="primary" size="small">Small</a-button>
<a-button type="primary">Medium</a-button>
<a-button type="primary" size="large">Large</a-button>
</a-space>
</template>
5.4 兼容性处理
使用 @vitejs/plugin-legacy 生成兼容代码，支持旧版本浏览器：
import legacy from '@vitejs/plugin-legacy'
export default defineConfig({
plugins: [
legacy({
targets: ['ie >= 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
})
]
})
注意事项：
- 会增加构建体积，需权衡兼容性与性能
六、进阶功能与插件生态
6.1 常用插件推荐
Vite 拥有丰富的插件生态，以下是一些常用插件：
- unplugin-auto-import：自动导入 API（如 Vue 组合式函数）
- vite-plugin-compression：生成 gzip/brotli 压缩文件
- vite-plugin-pages：文件系统路由（类似 Nuxt）
- vite-plugin-pwa：快速集成 PWA 功能
6.2 JSX 支持配置
如果需要在 Vue3 中使用 JSX，需要安装并配置相应的插件：
yarn add @vitejs/plugin-vue-jsx
配置 vite.config.js：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import vueJsx from '@vitejs/plugin-vue-jsx'
export default defineConfig({
plugins: [vue(), vueJsx()]
})
创建 JSX 组件：
import { defineComponent } from "vue"
export default defineComponent({
setup() {
return () => <div>Hello JSX !</div>
}
})
6.3 自定义插件开发
如果需要扩展 Vite 功能，可以开发自定义插件：
// 示例：日志插件
export default function logPlugin() {
return {
name: 'log-plugin',
transform(code, id) {
console.log(`Processing file: ${id}`)
return code
}
}
}
七、性能监控与分析
7.1 构建分析
使用 rollup-plugin-visualizer 生成构建分析报告，帮助优化打包体积：
npm install --save-dev rollup-plugin-visualizer
在 Vite 配置中使用：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { visualizer } from 'rollup-plugin-visualizer'
export default defineConfig({
plugins: [
vue(),
visualizer()
]
})
构建完成后，会生成一个可视化分析报告，显示各模块占用空间情况。
八、总结
Vue3 与 Vite 的结合为现代前端开发提供了极致的开发体验和性能。通过合理的配置和优化，可以打造高效、高性能的 Vue 应用。
Vite 优化核心原则：
开发环境：
- 利用原生 ESM 特性，实现快速冷启动
- 通过依赖预构建和 HMR 优化调试体验
生产环境：
- 合理拆分代码，利用缓存策略
- 压缩资源，通过 CDN 加速第三方依赖
通用原则：
- 善用插件生态，避免重复造轮子
- 持续监控构建指标（如首屏加载时间）
通过本文的详细介绍，相信你已经对 Vue3 和 Vite 的使用有了全面了解。现在可以开始创建你的项目，体验 Vue3 和 Vite 带来的开发效率提升。
扫一扫
2977
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
