1. @vitejs/plugin-vue（最高频 - 面试必问）
用途： Vue单文件组件编译支持
// web-admin/vite.config.ts 和 web-company/vite.config.ts
import vue from '@vitejs/plugin-vue';
export default defineConfig(() => {
return {
plugins: [vue()],
// ...
};
});
面试重点：
- 为什么需要这个插件？
- Vue 3项目必须使用此插件来编译.vue文件
- 支持SFC（Single File Component）语法
2. 路径别名配置（最高频 - 面试必问）
用途： 配置@别名，简化导入路径
// 两个项目都配置了路径别名
resolve: {
alias: {
'@': resolve(__dirname, './src'),
comps: resolve(__dirname, './src/components'),
store: resolve(__dirname, './src/store'),
'~': resolve(__dirname, './'),
},
},
面试重点：
- 如何配置路径别名？
- 为什么要使用路径别名？
- 与TypeScript配置的关系
3. 开发服务器配置（高频 - 面试常问）
用途： 配置开发服务器、代理和端口
// web-admin配置
server: {
host: '0.0.0.0',
port: 8080,
force: true,
proxy: {
'/adminapi': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\//, ''),
},
},
},
// web-company配置
server: {
host: '0.0.0.0',
port: 8081,
force: true,
proxy: {
'/webapi': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: path => path.replace(/^\//, ''),
},
},
},
面试重点：
- 如何配置API代理？
- 为什么需要代理？
- 开发环境和生产环境的区别
4. @vitejs/plugin-legacy（高频 - 兼容性面试常问）
用途： 支持旧版浏览器兼容
// web-company/vite.config.ts
import legacy from '@vitejs/plugin-legacy'
export default defineConfig(() => {
return {
plugins: [
vue(),
legacy({
targets: ['defaults', 'IE 11'],
additionalLegacyPolyfills: ['regenerator-runtime/runtime']
}),
// ...
],
};
});
面试重点：
- 如何支持IE 11？
- 兼容性处理的策略
- 现代浏览器和旧浏览器的平衡
5. vite-plugin-compression（高频 - 性能优化面试常问）
用途： 生产环境文件压缩
// web-company/vite.config.ts
import viteCompression from 'vite-plugin-compression';
export default defineConfig(() => {
return {
plugins: [
vue(),
legacy({...}),
viteCompression({
verbose: true, // 输出压缩结果
disable: false, // 是否禁用
threshold: 10240, // 只压缩大于10kb的文件
algorithm: 'gzip', // 使用gzip压缩
ext: '.gz', // 生成的压缩包后缀
})
],
};
});
面试重点：
- 为什么要压缩文件？
- 压缩算法的选择
- 性能优化的策略
6. TypeScript配置（中频 - 类型系统面试）
用途： TypeScript支持和类型检查
// tsconfig.json 配置
{
"compilerOptions": {
"baseUrl": "./",
"paths": {
"@/*": ["src/*"],
"comps/*": ["src/components/*"],
"store/*": ["src/store/*"],
"~": ["/*"]
},
"target": "ES2020",
"module": "ESNext",
"strict": true,
// ...
}
}
面试重点：
- TypeScript在Vite中的配置
- 路径别名与TypeScript的关系
- 类型检查的配置
7. 环境变量处理（中频 - 配置管理面试）
用途： 处理不同环境的配置
// 在代码中使用环境变量
instance.defaults.baseURL = `${import.meta.env.VITE_APP_BASE_URL}`;
面试重点：
- 如何配置环境变量？
- 开发环境和生产环境的区别
- 环境变量的安全性
8. CSS预处理器配置（中频 - 样式处理面试）
用途： SCSS/SASS支持
// 项目使用了SCSS
import './styles/index.scss';
import './styles/theme.css';
面试重点：
- 如何配置CSS预处理器？
- SCSS的优势
- 样式模块化
9. Vitest测试配置（低频 - 测试相关面试）
用途： 单元测试配置
// vitest.config.ts
import { defineConfig } from 'vitest/config';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
test: {
environment: 'jsdom',
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
});
面试重点：
- 如何配置测试环境？
- jsdom的作用
- 测试文件的组织
10. 构建优化配置（低频 - 构建优化面试）
用途： 生产构建优化
// 虽然没有显式配置，但Vite默认有优化
build: {
// 默认的构建优化
rollupOptions: {
// 代码分割等
}
}
面试重点：
- 构建优化的策略
- 代码分割
- 资源优化
11. PostCSS配置（低频 - 样式后处理面试）
用途： CSS后处理
// postcss.config.js
export default {
plugins: {
autoprefixer: {}
}
}
面试重点：
- PostCSS的作用
- autoprefixer的配置
- CSS兼容性处理
12. 静态资源处理（低频 - 资源管理面试）
用途： 处理图片、字体等静态资源
// 项目中的静态资源
import loadingImg from '@/assets/error/cloud.png';
import errorImg from '@/assets/error/404.png';
面试重点：
- 静态资源的处理方式
- 资源优化策略
- 字体文件的处理
总结
面试最高频插件：
- @vitejs/plugin-vue - Vue项目核心插件
- 路径别名配置 - 开发效率提升
- 开发服务器配置 - 开发环境配置
面试高频插件： 4. @vitejs/plugin-legacy - 兼容性处理 5. vite-plugin-compression - 性能优化
面试中频插件： 6. TypeScript配置 - 类型系统 7. 环境变量处理 - 配置管理 8. CSS预处理器配置 - 样式处理
面试低频插件： 9. Vitest测试配置 - 测试相关 10. 构建优化配置 - 构建优化 11. PostCSS配置 - 样式后处理 12. 静态资源处理 - 资源管理
