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 插件 ...(process.env.NODE_ENV === 'production' ? [ legacy({ targets: ['ie >= 11'], additionalLegacyPolyfills: ['regenerator-runtime/runtime'], modernPolyfills: true }) ] : []), AutoImport({ imports: ['vue', 'vue-router'], // 自动导入 Vue、Vue Router API // 自动导入 Vue 相关函数,以及 ElementPlus 的相关函数等 resolvers: [ ElementPlusResolver({ importStyle: 'sass', directives: true // 导入指令 }) ] }), Components({ // 自动导入 ElementPlus 的组件 resolvers: [ ElementPlusResolver({ importStyle: 'sass', directives: true }) ], dirs: ['src/components'] // 自动扫描组件目录 }), // 开发环境暂时禁用图片压缩插件 ...(process.env.NODE_ENV !== 'development' ? [ viteImagemin({ gifsicle: { optimizationLevel: 7 }, optipng: { optimizationLevel: 7 }, mozjpeg: { quality: 80 }, pngquant: { quality: [0.8, 0.9] }, svgo: { plugins: [{ name: 'removeViewBox' }] } }) ] : []) ], server: { host: '0.0.0.0', // 允许外部访问 port: 3000, // 指定端口 open: true, // 自动打开浏览器 fs: { strict: false // 允许访问项目根目录外的文件 }, // 代理配置(如有跨域问题) proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, rewrite: path => path.replace(/^\/api/, '') } } }, optimizeDeps: { // include: ['element-plus'] // 预构建依赖 }, build: { chunkSizeWarningLimit: 1000, // 增大分块警告阈值 rollupOptions: { // external: ['element-plus', 'element-plus/dist/index.css'], // 排除 Element Plus // external: ['element-plus'], // 排除 Element Plus 从打包中 output: { manualChunks: undefined // 取消手动分割,使用 Vite 自动策略 // manualChunks(id) { // if (id.includes('node_modules')) { // 将第三方库单独分包(如 axios、vue 等) // return id.split('node_modules/')[1].split('/')[0] // } // } } } }, css: { preprocessorOptions: { scss: { // 关键配置:强制 Sass 使用现代 API(二选一,推荐 modern-compiler) api: 'modern-compiler' // additionalData: `@import "@/styles/element-variables.scss";` // api: 'modern' // 轻量版,适合简单场景 }, less: { // 关键配置:自动注入 global.less additionalData: `@import "@/styles/global.less";`, // 可选:如果需要自定义 Less 选项 javascriptEnabled: true } } }, resolve: { alias: { '@': path.resolve(__dirname, 'src') // 添加路径别名 } } })