[TOC] > [home](https://cn.vitejs.dev/guide/features.html#typescript) ## 概述 - Vite 使用 esbuild 處理,編譯速度很快,約是`tsc`速度的 20~30 倍 - Vite 天然支持引入`.ts`文件。 ** 支持模板** | JavaScript | TypeScript | | --- | --- | | [vanilla](https://vite.new/vanilla) | [vanilla-ts](https://vite.new/vanilla-ts) | | [vue](https://vite.new/vue) | [vue-ts](https://vite.new/vue-ts) | | [react](https://vite.new/react) | [react-ts](https://vite.new/react-ts) | | [preact](https://vite.new/preact) | [preact-ts](https://vite.new/preact-ts) | | [lit](https://vite.new/lit) | [lit-ts](https://vite.new/lit-ts) | | [svelte](https://vite.new/svelte) | [svelte-ts](https://vite.new/svelte-ts) | **社區模板** https://github.com/vitejs/awesome-vite#templates ## 快速啟動 ``` npm create vite@latest my-vue-app -- --template vue yarn create vite my-vue-app --template vue ``` ## Monorepo 和鏈接依賴 在一個 monorepo 啟動中，該倉庫中的某個包可能會成為另一個包的依賴。Vite 會自動偵測沒有從`node_modules`解析的依賴項，并將鏈接的依賴視為源碼。它不會嘗試打包被鏈接的依賴，而是會分析被鏈接依賴的依賴列表 ## 瀏覽器緩存 已預構建的依賴請求使用 HTTP 頭`max-age=31536000, immutable`進行強緩存，以提高開發期間頁面重新加載的性能 ## 瀏覽器兼容性 用于生產環境的構建包會假設目標瀏覽器支持現代 JavaScript 語法 * Chrome >=87 * Firefox >=78 * Safari >=14 * Edge >=88 可以通過[`build.target`配置項](https://cn.vitejs.dev/config/build-options.html#build-target)指定構建目標，最低支持`es2015` ## 自定義構建 構建過程可以通過多種[構建配置選項](https://cn.vitejs.dev/config/#build-options)來自定義構建。具體來說，你可以通過`build.rollupOptions`直接調整底層的[Rollup 選項](https://rollupjs.org/configuration-options/)： ``` // vite.config.js export default defineConfig({ build: { rollupOptions: { // https://rollupjs.org/configuration-options/ }, }, }) ``` ## 多頁面應用模式 目錄結構 ``` ├── package.json ├── vite.config.js ├── index.html ├── main.js └── nested ├── index.html └── nested.js ``` 在開發過程中，簡單地導航或鏈接到`/nested/`- 將會按預期工作 ``` // vite.config.js import { resolve } from 'path' import { defineConfig } from 'vite' export default defineConfig({ build: { rollupOptions: { input: { main: resolve(__dirname, 'index.html'), nested: resolve(__dirname, 'nested/index.html'), }, }, }, }) ```