- 引入 unplugin-vue-components 自动按需导入 Element Plus 组件和图标 - 引入 unplugin-auto-import 自动导入 Vue/EP API(ref/reactive/ElMessage 等) - vite.config 添加 manualChunks 拆包(vendor 独立 chunk) - 移除 main.js 全量 Element Plus 导入和图标注册 - 所有 .vue 文件移除冗余的 import 语句
44 lines
1.3 KiB
JavaScript
44 lines
1.3 KiB
JavaScript
import { defineConfig } from 'vite'
|
||
import vue from '@vitejs/plugin-vue'
|
||
import Components from 'unplugin-vue-components/vite'
|
||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||
import AutoImport from 'unplugin-auto-import/vite'
|
||
|
||
export default defineConfig({
|
||
plugins: [
|
||
vue(),
|
||
// Element Plus 组件按需导入(自动检测模板中的 <el-xxx> 并导入样式)
|
||
Components({
|
||
resolvers: [ElementPlusResolver({ importStyle: 'css' })],
|
||
dts: false, // CI 构建不需要生成类型文件
|
||
}),
|
||
// Vue / Element Plus API 自动导入(ref, reactive, ElMessage 等)
|
||
AutoImport({
|
||
imports: ['vue', 'vue-router'],
|
||
resolvers: [ElementPlusResolver()],
|
||
dts: false,
|
||
}),
|
||
],
|
||
base: '/',
|
||
build: {
|
||
outDir: 'dist',
|
||
emptyOutDir: true,
|
||
// 代码分割:将第三方库单独拆包
|
||
rollupOptions: {
|
||
output: {
|
||
manualChunks(id) {
|
||
if (id.includes('node_modules/element-plus')) {
|
||
return 'element-plus'
|
||
}
|
||
if (id.includes('node_modules/@element-plus')) {
|
||
return 'element-icons'
|
||
}
|
||
if (id.includes('node_modules/vue') || id.includes('node_modules/@vue')) {
|
||
return 'vue-vendor'
|
||
}
|
||
},
|
||
},
|
||
},
|
||
},
|
||
})
|