106 lines
3.5 KiB
TypeScript
106 lines
3.5 KiB
TypeScript
import { defineConfig } from 'vite'
|
||
import vue from '@vitejs/plugin-vue'
|
||
import path from 'path' // 引入 path 模块
|
||
|
||
import viteImagemin from 'vite-plugin-imagemin' // 新插件
|
||
import AutoImport from 'unplugin-auto-import/vite'
|
||
import Components from 'unplugin-vue-components/vite'
|
||
// 引入 ElementPlus 相关解析器
|
||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||
|
||
import legacy from '@vitejs/plugin-legacy'
|
||
export default defineConfig({
|
||
plugins: [
|
||
vue(),
|
||
|
||
legacy({
|
||
targets: ['ie >= 11'],
|
||
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
|
||
modernPolyfills: true // 启用现代浏览器的 polyfill
|
||
}),
|
||
AutoImport({
|
||
imports: ['vue', 'vue-router'], // 自动导入 Vue、Vue Router API
|
||
// 自动导入 Vue 相关函数，以及 ElementPlus 的相关函数等
|
||
resolvers: [
|
||
ElementPlusResolver({
|
||
importStyle: 'sass', // 可选：按需导入样式
|
||
directives: true, // 导入指令
|
||
version: '2.3.6' // 版本号
|
||
})
|
||
]
|
||
}),
|
||
Components({
|
||
// 自动导入 ElementPlus 的组件
|
||
resolvers: [
|
||
ElementPlusResolver({
|
||
importStyle: 'sass',
|
||
directives: true
|
||
})
|
||
],
|
||
dirs: ['src/components'] // 自动扫描组件目录
|
||
}),
|
||
viteImagemin({
|
||
// 基础压缩配置（可根据需求扩展）
|
||
gifsicle: { optimizationLevel: 7 },
|
||
optipng: { optimizationLevel: 7 },
|
||
mozjpeg: { quality: 80 },
|
||
pngquant: { quality: [0.8, 0.9] },
|
||
svgo: { plugins: [{ name: 'removeViewBox' }] }
|
||
})
|
||
],
|
||
build: {
|
||
rollupOptions: {
|
||
// external: ['element-plus', 'element-plus/dist/index.css'], // 排除 Element Plus
|
||
// external: ['element-plus'], // 排除 Element Plus 从打包中
|
||
output: {
|
||
manualChunks(id) {
|
||
// 只打包实际使用的 Element Plus 组件
|
||
// if (id.includes('element-plus/es/components')) {
|
||
// const componentName = id.split('element-plus/es/components/')[1].split('/')[0]
|
||
// return `element-${componentName}`
|
||
// }
|
||
if (id.includes('node_modules')) {
|
||
// 将第三方库单独分包（如 axios、vue 等）
|
||
return id.split('node_modules/')[1].split('/')[0]
|
||
}
|
||
// 1. 将 Element Plus 整体打包为一个 chunk
|
||
// 只分割实际使用的库
|
||
// if (id.includes('vue') || id.includes('vue-router') || id.includes('pinia')) {
|
||
// return 'vue-vendor'
|
||
// }
|
||
//
|
||
// if (id.includes('axios') || id.includes('nprogress')) {
|
||
// return 'utils'
|
||
// }
|
||
//
|
||
// // 不强制分割第三方依赖，让 Vite 自动处理
|
||
// if (id.includes('node_modules') && !id.includes('@babel') && !id.includes('@types')) {
|
||
// return undefined // 取消手动分割
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
},
|
||
css: {
|
||
preprocessorOptions: {
|
||
scss: {
|
||
// 关键配置：强制 Sass 使用现代 API（二选一，推荐 modern-compiler）
|
||
api: 'modern-compiler'
|
||
// api: 'modern' // 轻量版，适合简单场景
|
||
},
|
||
less: {
|
||
// 关键配置：自动注入 global.less
|
||
additionalData: `@import "@/styles/global.less";`,
|
||
|
||
// 可选：如果需要自定义 Less 选项
|
||
javascriptEnabled: true
|
||
}
|
||
}
|
||
},
|
||
resolve: {
|
||
alias: {
|
||
'@': path.resolve(__dirname, 'src') // 添加路径别名
|
||
}
|
||
}
|
||
})
|