一、基础
- 搭建一个Vite项目
npm init vite@latest
- 配置文件
项目跟目录下的配置文件为vite.config.js文件，当以命令行方式运行vite时，Vite会自动解析该文件，其基础配置如下所示：
import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // 使用defineConfig工具函数，不用jsdoc注解也可以获取类型提示 export default defineConfig({ plugins: [vue()] })
- 情景配置
如果配置需要基于（dev/serve或build）命令或者不同的模式来决定选项，则可以选择导出如下函数：
import {defineConfig} from 'vite'; import vue from '@vitejs/plugin-vue'; // 使用defineConfig工具函数，不用jsdoc注解也可以获取类型提示 export default defineConfig(({command, mode}) => { console.log(command, mode); // 开发环境command值为serve，生产环境为build if (command === 'serve') { return { plugins: [vue()] }; } else { return { plugins: [vue()] }; } });
二、vite为什么快
拜读了vite的官方文档，其官方文档已经给了很明确的解释
https://vitejs.cn/guide/why.html#the-problems，总结下来主要是以下几点：
- 提升vite服务器启动速度
类似于webpack这种打包器方式的构建工具，其首先会打包所有资源为bundle，然后才启动服务，而vite将该过程后置并做了一些优化来提升服务器的启动速度，主要如下所示：
（1）通过esbuild预构建依赖
依赖指的是在开发时不会变动的纯JavaScript，主要包含node_modules下的文件，该内容通常包含多种模块化格式（CommonJS、UMD、ESM等），所以需要进行转换为原生的ES模块，为了完成该转换过程，引入esbuild进行预构建依赖，由于Esbuild使用go编写，其构建速度相比于JavaScript编写的打包器构建速度更快。
（2）现代浏览器支持ESM格式的代码
由于浏览器支持ESM格式的代码，所以浏览器可接管打包程序的部分工作，Vite只需要在浏览器请求源码时进行转换并按需提供源码。
- 加快更新速度
为了加快更新速度，Vite做了很多优化，主要体现在以下几点：
（1）减少网络请求
esbuild预构建依赖时，将许多内部模块的ESM依赖关系转换为单个模块，从而减少网络请求个数，提高页面加载性能
（2）缓存
源码模块的请求会根据
304 Not Modified进行协商缓存，而依赖模块请求则会通过Cache-Control: max-age=31536000,immutable进行强缓存，因此一旦被缓存它们将不需要再次请求
三、配置项
Vite为了方便用户使用，提供了很多配置项，主要包含7类：共享配置、开发服务选项、构建选项、预览选项、依赖优化选项、SSR选项、Worker选项，我个人认为最重要的是前三类选项，接下来一起来看看这前三个选项。
3.1 共享选项
共享选项指的是不管是开发环境还是生产环境vite均会执行的配置项，主要用来表征一些通用内容，下面我列举几个自己认为重要的来展示出来。
- root
项目根目录（即index.html文件）所在的位置，例如当index.html文件及src文件夹在testRoot文件件下时，其配置如下所示：
export default defineConfig({ root: './testRoot', plugins: [vue()] });
- base
用于设置公共文件路径，例如按如下设置后在开发环境下可通过
http://localhost:3000/testBase访问到所需页面：
export default defineConfig({ base: '/testBase/', plugins: [vue()] });
- mode
用于指示本次的开发模式（development）还是生产模式（production），其会把serve和build时的模式都覆盖掉，也可通过--mode选项来重写：
export default defineConfig({ plugins: [vue()], mode: 'production' });
- plugins
设置需要用到的插件数组，插件是用来解决纯粹vite提供的开箱即用的功能无法满足时所提供的一种能力，例如通过@vitejs/plugin-vue提供对Vue3单文件组件的支持：
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [vue()] });
- publicDir
该配置设置静态资源服务的文件，该配置默认是public文件件，该目录中的文件在开发期间在/处提供，并在构建期间复制到outDir的根目录，如下是将静态资源服务的文件设置到./testPublicDir下：
export default defineConfig({ plugins: [vue()], publicDir: './testPublicDir' });
- resolve.alias
使用该配置用于设置文件系统路径的别名，设置路径是使用使用绝对路径，使用相对路径的别名值会原封不动的被使用：
export default defineConfig({ plugins: [vue()], resolve: { alias: { '@': path.resolve(__dirname, './src') } } });
- envDir与envPrefix
有的时候需要设置一些环境变量在代码中使用，通过envDir可以设置环境变量文件的目录（默认为根目录），通过envPrefix可以设置暴露给环境变量的前缀（默认为VITE_)，设置好之后就可以通过import.meta.env在代码中读取该变量。该目录下所能读取的文件主要有以下几种：
.env # 所有情况下都会加载 .env.local # 所有情况下都会加载，但会被 git 忽略 .env.[mode] # 只在指定模式下加载 .env.[mode].local # 只在指定模式下加载，但会被 git 忽略
文件中的内容可按如下设置：
VITE_TEST=test // 可以被读取 TEST=test // 不能被读取
3.2 开发服务选项
在开发环境时除了要注意共享选项，更要注意开发服务选项，该选项直接表征我们如何配置vite服务器，我认为常用的选项如下所示：
export default defineConfig({ plugins: [vue()], server: { // 是否自动在浏览器中打开应用程序 open: true, // 指定服务器应该监听哪个IP地址 host: '127.0.0.1', // 指定开发服务器的端口号 port: 8080, // 代理 proxy: { '/api': { target: 'http://127.0.0.1:8888', changeOrigin: true, rewrite: path => path.replace('^/api', '') } } } });
3.3 构建选项
当系统开发完毕之后肯定需要打包构建，进而发布，vite的打包构建利用了rollup的能力，打包构建的选项在构建选项中，我认为常用的选项如下所示：
export default defineConfig({ plugins: [vue()], build: { // 设置最终构建的浏览器兼容目标（默认值是‘modules’） target: 'es2015', // 指定输出路径,默认是dist outDir: 'testOutDir', // 指定生成静态资源的存放路径，默认assets assetsDir: 'public', // 指定小于多少大小的内容将内联为base64，减少请求次数（默认4096，即4kb） assetsInlineLimit: 4096, // 构建后是否生成source map文件，默认为false sourcemap: true, // 自定义底层的Rollup配置（一般不需要配置） rollupOptions: { // 指定打包的入口文件 input: { default: './index.html' }, // 指定文件输出的配置 output: { // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值 entryFileNames: 'test/test-[name]-[hash].js', // 用于命名代码拆分时创建的共享块的输出命名 chunkFileNames: 'js/test-[name]-[hash].js', // 用于输出静态资源的命名，[ext]表示文件扩展名 assetFileNames: 'assets/test-[name]-[hash].[ext]' } }, // 是否产出mainfest.json文件，该文件包含了没有被hash的资源名和hash后版本的映射 manifest: true } });
四、单页应用与多页应用配置
通过vite默认生成的就是一个单页面应用的配置，但是如何配置一个多页面应用的？这个确实值得去琢磨一下，以如下的目录结构为例，如何进行配置呢？
vite-project ├─ .env ├─ .gitignore ├─ README.md ├─ index.html ├─ package-lock.json ├─ package.json ├─ public │ └─ favicon.ico ├─ src │ ├─ page1 │ │ ├─ index.html │ │ └─ src │ │ ├─ App.vue │ │ ├─ assets │ │ │ └─ logo.png │ │ ├─ components │ │ │ └─ HelloWorld.vue │ │ └─ main.js │ └─ page2 │ ├─ index.html │ └─ src │ ├─ App.vue │ ├─ assets │ │ └─ logo.png │ ├─ components │ │ └─ HelloWorld.vue │ └─ main.js └─ vite.config.js
针对如上的页面结构应该如何配置呢？让我们一起来瞧一瞧。
export default defineConfig({ plugins: [vue()], root: './src', build: { rollupOptions: { input: { page1: path.resolve(__dirname, './src/page1/index.html'), page2: path.resolve(__dirname, './src/page2/index.html') } } } });
