Vite
Vite 基础配置
掌握 vite.config.js 的常用配置项，包括路径别名、服务器端口、构建输出目录和插件注册。
🎯 引言
学会这篇文章，你能读懂并写出常见的 Vite 配置文件，设置路径别名、开发服务器端口、打包输出目录，还能给项目注册插件。这些都是实际项目里最常用的配置。
🧱 配置文件在哪里
Vite 的配置文件默认叫 vite.config.js，放在项目根目录。如果使用 TypeScript，可以命名为 vite.config.ts。
最简单的配置文件长这样：
vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
// 这里写配置
});
defineConfig 是 Vite 提供的一个辅助函数，作用是让编辑器自动提示配置项，减少写错。
✨ 常用配置项
1. 配置路径别名
项目里经常需要写很长的相对路径，比如 ../../../components/Button.vue。配置别名后，可以用 @/components/Button.vue 代替。
vite.config.js
import { defineConfig } from 'vite';
import path from 'path';
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
});
如果 IDE 提示找不到
@，需要在 jsconfig.json 或 tsconfig.json 里也配置一次 paths，这样编辑器才能正确跳转。2. 配置开发服务器
开发服务器的端口、是否自动打开浏览器、代理等都可以配置：
vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
server: {
port: 3000, // 开发服务器端口
open: true, // 启动时自动打开浏览器
cors: true, // 开启跨域
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
});
proxy 只在开发环境生效，用来解决本地调用后端接口的跨域问题。上线后需要在服务器或后端配置 CORS。3. 配置构建输出
vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
base: '/', // 部署路径
build: {
outDir: 'dist', // 输出目录
assetsDir: 'assets', // 静态资源子目录
sourcemap: true, // 生成 source map
},
});
如果项目部署在子路径（如
https://example.com/app/），需要把 base 改成 /app/。🛠 注册插件
Vite 插件写在 plugins 数组里。以 Vue 官方插件为例：
vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
});
多个插件依次添加：
vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import legacy from '@vitejs/plugin-legacy';
export default defineConfig({
plugins: [
vue(),
legacy({
targets: ['defaults', 'not IE 11'],
}),
],
});
🧾 小节总结
- Vite 配置文件默认是
vite.config.js，用defineConfig包裹可获得更好的类型提示。 resolve.alias用来配置路径别名，简化模块引入路径。server配置开发服务器端口、代理、自动打开浏览器等。build配置输出目录、资源目录、sourcemap 等。- 插件通过
plugins数组注册，例如@vitejs/plugin-vue。
❓ 知识问答
Q1：vite.config.js 必须存在吗？
不是。很多小项目完全零配置也能跑，只有需要别名、代理、插件时才创建。
Q2：路径别名 @ 是强制的吗？
不是。@ 只是社区约定，你可以用 #、~ 等其他符号，但要保证项目里统一。
Q3：base 配置什么时候需要改？
当项目不部署在域名根目录时，必须改成对应的子路径，否则打包后的资源会 404。
🧪 小练习
给你的 Vite 项目添加以下配置：
- 配置
@指向src目录。 - 把开发服务器端口改成
4000。 - 添加一个
/api代理到http://localhost:3000。
vite.config.js
import { defineConfig } from 'vite';
// 请在这里编写代码
🎉 恭喜你掌握了 Vite 的基础配置！下一篇我们来看看 Vite 插件怎么用。