1 基本配置
Vite 的配置文件 vite.config.js 是基于 JavaScript 或 TypeScript 的文件，可以使用 ES 模塊語法進行導出。Vite 通過這個配置文件來調整各種構建和開發的選項。
1.1 創建配置文件
在項目根目錄創建 vite.config.js 文件：
// vite.config.js
import { defineConfig } from 'vite'export default defineConfig({// 基本配置項在這里
})
1.2 常用基本配置
root
指定項目的根目錄（默認是當前工作目錄）：
export default defineConfig({root: 'src'
})
base
設置項目的基本公共路徑（默認是 /）。當你需要將項目部署在非根目錄時，調整這個參數：
export default defineConfig({base: '/my-app/'
})
publicDir
指定靜態資源目錄（默認是 public）。在這個目錄中的文件會被復制到輸出目錄的根部：
export default defineConfig({publicDir: 'static'
})
cacheDir
指定緩存目錄（默認是 node_modules/.vite），用于存儲預構建的依賴：
export default defineConfig({cacheDir: '.vite-cache'
})
2 環境變量和模式
Vite 支持基于文件的環境變量配置，你可以根據不同的構建模式（如開發模式和生產模式）使用不同的環境變量。
2.1 環境變量文件
你可以在項目根目錄中創建 .env 文件來定義環境變量：
# .env
VITE_APP_TITLE=My Vite App
對于特定模式的環境變量文件，可以命名為 .env.[mode]：
# .env.production
VITE_APP_TITLE=My Vite App (Production)
2.2 使用環境變量
在代碼中，通過 import.meta.env 訪問環境變量：
console.log(import.meta.env.VITE_APP_TITLE)
2.3 環境變量的替換
Vite 會在構建時替換 import.meta.env 中的變量：
const apiUrl = import.meta.env.VITE_API_URL
fetch(apiUrl + '/endpoint').then(response => response.json()).then(data => console.log(data))
3 配置文件解析 (vite.config.js)
3.1defineConfig
defineConfig 是 Vite 提供的一個輔助函數，用于提供類型提示和自動完成：
import { defineConfig } from 'vite'export default defineConfig({// 配置項在這里
})
3.2 常見配置項
server
配置開發服務器相關的選項：
export default defineConfig({server: {host: '0.0.0.0', // 指定服務器主機名port: 3000, // 指定服務器端口open: true, // 自動打開瀏覽器proxy: { // 配置代理'/api': {target: 'http://localhost:4000',changeOrigin: true,rewrite: path => path.replace(/^\/api/, '')}}}
})
build
配置構建選項：
export default defineConfig({build: {outDir: 'dist', // 輸出目錄assetsDir: 'assets', // 靜態資源目錄sourcemap: true, // 生成 sourcemap 文件rollupOptions: { // 自定義 Rollup 選項output: {manualChunks: {vendor: ['vue']}}}}
})
resolve
配置模塊解析選項：
export default defineConfig({resolve: {alias: {'@': '/src' // 路徑別名},extensions: ['.js', '.vue', '.json'] // 自動解析的擴展名}
})
css
配置 CSS 相關選項：
export default defineConfig({css: {preprocessorOptions: {scss: {additionalData: `@import "@/styles/variables.scss";`}},modules: {scopeBehaviour: 'local', // 配置 CSS 模塊行為generateScopedName: '[name]__[local]___[hash:base64:5]'}}
})
plugins
配置 Vite 插件：
import vue from '@vitejs/plugin-vue'export default defineConfig({plugins: [vue()]
})
optimizeDeps
optimizeDeps 選項用于配置依賴預構建的行為。Vite 會掃描你的項目并預構建依賴，以提高開發服務器的啟動速度。
export default defineConfig({optimizeDeps: {entries: ['index.html'], // 手動指定要掃描的入口文件exclude: ['your-package'], // 排除不需要預構建的依賴include: ['another-package'] // 強制預構建某些依賴}
})
json
json 選項用于配置 JSON 文件的處理方式：
export default defineConfig({json: {namedExports: true, // 支持從 JSON 文件導入具名導出stringify: false // 禁用自動 JSON.stringify 轉換}
})
esbuild
esbuild 選項用于配置內部使用的 esbuild 編譯器：
export default defineConfig({esbuild: {jsxFactory: 'h', // 自定義 JSX 工廠函數jsxFragment: 'Fragment', // 自定義 JSX 片段minify: true // 啟用代碼壓縮}
})
logLevel
logLevel 選項用于設置日志級別：
export default defineConfig({logLevel: 'info' // 可選值：'info', 'warn', 'error', 'silent'
})
define
define 選項用于定義全局常量，這些常量會在打包時進行替換：
export default defineConfig({define: {__VERSION__: JSON.stringify('1.0.0')}
})
ssr
ssr 選項用于配置服務器端渲染（SSR）相關的選項：
export default defineConfig({ssr: {external: ['react', 'react-dom'], // 指定外部化依賴noExternal: ['your-package'] // 禁止外部化某些依賴}
})
4 命令行接口 (CLI)
Vite 提供了一些命令行工具來幫助開發和構建項目。
4.1 啟動開發服務器
vite
這將啟動一個開發服務器，并打開一個瀏覽器窗口，你可以在其中查看應用。
或者使用 npm script：
npm run dev
4.2 構建生產版本
vite build
這將構建生產版本的應用，輸出到 dist 目錄。
或者使用 npm script：
npm run build
4.3 預覽構建結果
vite preview
這將啟動一個靜態文件服務器，用于預覽構建結果。
或者使用 npm script：
npm run serve
4.4 CLI 選項
可以通過命令行選項覆蓋配置文件中的選項。例如，指定配置文件：
vite --config ./config/vite.config.js
或者指定環境模式：
vite --mode production
4.5 命令行全局安裝
你可以將 Vite 安裝為全局命令，以便在任何地方使用：
npm install -g vite
安裝后，你可以使用 vite 命令來創建、開發和構建項目。
項目實戰)
