下面，我們來系統的梳理關于 Vite 項目初始化與配置 的基本知識點：

---

一、Vite 核心概念與優勢

1.1 什么是 Vite？

Vite（法語意為 “快速”）是新一代的前端構建工具，由 Vue.js 作者尤雨溪開發。它解決了傳統構建工具（如 Webpack）在開發環境中的性能瓶頸問題。

1.2 Vite 的核心優勢

特性	傳統構建工具	Vite	優勢說明
啟動速度	慢（全量打包）	極快（按需編譯）	基于原生 ESM，無需打包
熱更新	慢（重建整個包）	快（按需 HMR）	只更新修改的模塊
構建速度	慢（全量構建）	快（Rollup 構建）	生產環境使用 Rollup
配置復雜度	高	低	開箱即用，減少配置
框架支持	需 loader	原生支持	Vue/React/Svelte 等
開發體驗	一般	優秀	即時服務器啟動

1.3 Vite 核心組成

1. 開發服務器：基于原生 ES 模塊
2. 構建命令：基于 Rollup
3. 插件系統：兼容 Rollup 插件
4. HMR API：快速熱模塊替換
5. 依賴預構建：優化 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'}}}},