下面，我们来系统的梳理关于 Vite 项目初始化与配置 的基本知识点：

一、Vite 核心概念与优势

1.1 什么是 Vite？

Vite（法语意为 “快速”）是新一代的前端构建工具，由 Vue.js 作者尤雨溪开发。它解决了传统构建工具（如 Webpack）在开发环境中的性能瓶颈问题。

1.2 Vite 的核心优势

特性	传统构建工具	Vite	优势说明
启动速度	慢（全量打包）	极快（按需编译）	基于原生 ESM，无需打包
热更新	慢（重建整个包）	快（按需 HMR）	只更新修改的模块
构建速度	慢（全量构建）	快（Rollup 构建）	生产环境使用 Rollup
配置复杂度	高	低	开箱即用，减少配置
框架支持	需 loader	原生支持	Vue/React/Svelte 等
开发体验	一般	优秀	即时服务器启动

1.3 Vite 核心组成

开发服务器：基于原生 ES 模块
构建命令：基于 Rollup
插件系统：兼容 Rollup 插件
HMR API：快速热模块替换
依赖预构建：优化 CommonJS/UMD 模块

二、项目初始化与基础配置

2.1 创建 Vite 项目

# 使用 npm
npm create vite@latest# 使用 yarn
yarn create vite# 使用 pnpm
pnpm create vite

2.2 项目初始化流程

✔ Project name: … vite-project
✔ Select a framework: › Vue
✔ Select a variant: › TypeScriptScaffolding project in ./vite-project...
Done. Now run:cd vite-projectnpm installnpm run dev

2.3 项目目录结构

my-vite-project/
├── node_modules/
├── public/                  # 静态资源
│   └── favicon.ico
├── src/                     # 源代码
│   ├── assets/              # 图片等资源
│   ├── components/          # 组件
│   ├── App.vue              # 主组件
│   └── main.ts              # 入口文件
├── index.html               # 入口 HTML
├── package.json
├── tsconfig.json            # TypeScript 配置
├── vite.config.ts           # Vite 配置文件
└── .gitignore

2.4 基本 vite.config.js 配置

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'export default defineConfig({// 基础配置base: '/', // 部署基础路径// 插件配置plugins: [vue()],// 开发服务器配置server: {port: 3000, // 端口open: true, // 自动打开浏览器cors: true, // 允许跨域host: '0.0.0.0' // 监听所有地址},// 构建配置build: {outDir: 'dist', // 输出目录assetsDir: 'assets', // 静态资源目录sourcemap: true // 生成 sourcemap}
})

三、核心配置详解

3.1 开发服务器配置 (server)

export default defineConfig({server: {port: 8080, // 指定端口strictPort: true, // 端口占用时退出open: '/about', // 指定打开路径proxy: { // 代理配置'/api': {target: 'http://jsonplaceholder.typicode.com',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}},hmr: { // 热更新配置overlay: false // 禁用错误覆盖层}}
})

3.2 构建配置 (build)

export default defineConfig({build: {outDir: 'build', // 自定义输出目录assetsInlineLimit: 4096, // 小于4KB的资源内联cssCodeSplit: true, // CSS代码分割rollupOptions: { // Rollup配置input: {main: 'index.html',admin: 'admin.html' // 多页面入口},output: {manualChunks(id) { // 自定义代码分割if (id.includes('node_modules')) {return 'vendor'}}}},