[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'), }, }, }, }) ```