当以命令行方式运行 vite 时，Vite 会自动解析 项目根目录下名为 vite.config.js（或 vite.config.ts） 的文件。
一、使用 vite 创建的项目里默认的配置
使用 vite 创建项目完成后会自动生成 一个 vite.config.js 文件，当然你可以将其名重定义为 vite.config.ts 文件。其默认代码如下：
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
})
二、vite 区分不同环境的配置
export default defineConfig(({ command, mode }) => {
if (command === 'serve') {
return {
// dev 独有配置
}
} else {
// command === 'build'
return {
// build 独有配置
}
}
})
如果配置需要调用一个异步函数，也可以转而导出一个异步函数：
export default defineConfig(async ({ command, mode }) => {
const data = await asyncFunction()
return {
// 构建模式所需的特有配置
}
})
三、vite 基本配置汇总
1. 配置本地服务（开发服务器选项）
本地运行时的服务设置，包括：
- host：string | boolean，服务器 IP 地址。
- port：number，服务器端口号。
- strictPort：boolean，设为 true 时若端口已被占用则会直接退出，而不是尝试下一个可用端口。
- https：boolean | https.ServerOptions，是否启用 https。
- open：boolean | string，设置服务器启动时自动在浏览器中打开的应用程序。
- proxy：Record<string, string | ProxyOptions>，为开发服务器配置自定义代理规则。
- cors：boolean | CorsOptions，为开发服务器配置 CORS。默认启用并允许任何源。
- headers：OutgoingHttpHeaders，指定服务器响应的 header。
- force：boolean，设置为 true 强制使依赖预构建。
- hmr：boolean | { protocol?: string, host?: string, port?: number, path?: string, timeout?: number, overlay?: - - boolean, clientPort?: number, server?: Server }，禁用或配置 HMR 连接。
- watch：object，传递给 chokidar 的文件系统监听器选项。
- middlewareMode：‘ssr’ | ‘html’，以中间件模式创建 Vite 服务器。（不含 HTTP 服务器）
- base：string | undefined，在 HTTP 请求中预留此文件夹，用于代理 Vite 作为子文件夹时使用。应该以 / 字符开始和结束。
- fs
strict：boolean，限制为工作区 root 路径以外的文件的访问。
allow：string[]，限制哪些文件可以通过 /@fs/ 路径提供服务。
deny：string[]，用于限制 Vite 开发服务器提供敏感文件的黑名单。
origin：string，用于定义开发调试阶段生成资产的 origin。
例如：
export default defineConfig({
server: {
host: '0.0.0.0',
port: '3000',
proxy: {
// 字符串简写写法
'/foo': 'http://localhost:4567',
// 选项写法
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
},
// 正则表达式写法
'^/fallback/.*': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/fallback/, '')
},
// 使用 proxy 实例
'/api': {
target: 'http://jsonplaceholder.typicode.com',
changeOrigin: true,
configure: (proxy, options) => {
// proxy 是 'http-proxy' 的实例
}
},
// 代理 WebSocket 或 socket
'/socket.io': {
target: 'ws://localhost:3000',
ws: true
}
}
})
2、配置 @ 符号
需要先安装 @types/node 插件：
npm i -D @types/node
然后，在 vite.config.ts 文件中增加以下配置：
import { resolve } from "path"
export default defineConfig({
// 配置 @ 符号
resolve: {
alias: {
"@": resolve(__dirname, "src")
}
}
})
如果你用到了 ts，需要在 tsconfig.json 的配置文件中增加以下配置：
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"#/*": ["types/*"]
},
},
以上配置完成后，凡是在 src 文件下的相对路径都可以写成 @ 符号了。
