118 lines
3.4 KiB
TypeScript
118 lines
3.4 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 插件
|
||
...(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') // 添加路径别名
|
||
}
|
||
}
|
||
})
|