前端——前端核心技术要点深度解析 之 【Vite 构建工具核心机制】

Vite 利用 ES modules 和 esbuild 实现了快速的开发服务器和构建过程。

重点难点：

// Vite 配置优化示例
export default defineConfig({
server: {
// 开发服务器配置
host: '0.0.0.0',
port: 3000,
// 代理配置解决跨域问题
proxy: {
'/api': {
target: 'http://localhost:8080',
changeOrigin: true,
rewrite: (path) => path.replace(/^\\/api/, '')
}
}
},

build: {
// 构建优化
rollupOptions: {
output: {
// 分包策略
manualChunks: {
vendor: ['vue', 'pinia'],
utils: ['lodash', 'dayjs']
}
}
},
// 资源压缩
minify: 'esbuild',
// CSS 代码分割
cssCodeSplit: true
},

// 插件配置
plugins: [
vue(),
// 自动导入组件
AutoImport({
imports: ['vue', 'vue-router', 'pinia'],
dts: true
})
]
})