128 lines
3.7 KiB
TypeScript
128 lines
3.7 KiB
TypeScript
import { defineConfig } from 'vite'
|
||
import vue from '@vitejs/plugin-vue'
|
||
import path from 'path'
|
||
|
||
// import viteImagemin from 'vite-plugin-imagemin'
|
||
import AutoImport from 'unplugin-auto-import/vite'
|
||
import Components from 'unplugin-vue-components/vite'
|
||
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
|
||
import { visualizer } from 'rollup-plugin-visualizer'
|
||
import legacy from '@vitejs/plugin-legacy'
|
||
|
||
export default defineConfig(({ mode }) => ({
|
||
// 新增：指定打包基础路径为 /web/
|
||
// base: '/web/', // 所有资源引用会以 /web/ 为前缀（如静态资源路径变为 /web/static/js/xxx.js）
|
||
base: mode === 'production' ? '/web/' : '/',
|
||
|
||
plugins: [
|
||
visualizer({
|
||
filename: './node_modules/.cache/visualizer/stats.html',
|
||
open: true,
|
||
gzipSize: true,
|
||
brotliSize: true
|
||
}),
|
||
vue(),
|
||
...(process.env.NODE_ENV === 'production'
|
||
? [
|
||
legacy({
|
||
targets: ['ie >= 11'],
|
||
additionalLegacyPolyfills: ['regenerator-runtime/runtime'],
|
||
modernPolyfills: true
|
||
})
|
||
]
|
||
: []),
|
||
AutoImport({
|
||
// 1. 自动导入的 API 来源（Vue 核心 API + Vue Router 等）
|
||
imports: [
|
||
'vue', // 自动导入 Vue 组合式 API（ref、reactive、onMounted 等）
|
||
'vue-router' // 可选：自动导入 Vue Router API（useRouter 等）
|
||
// 其他来源（如 Pinia）可按需添加
|
||
],
|
||
// 2. 生成类型声明文件（让 TypeScript 识别自动导入的 API）
|
||
dts: 'src/auto-imports.d.ts', // 生成的类型文件路径（必须存在）
|
||
// 3. 解决 ESLint 报错（可选，若 ESLint 提示“未定义变量”）
|
||
eslintrc: {
|
||
enabled: true, // 生成 ESLint 配置片段
|
||
filepath: './.eslintrc-auto-import.json' // 生成的 ESLint 配置文件
|
||
}
|
||
}),
|
||
Components({
|
||
resolvers: [
|
||
ElementPlusResolver({
|
||
importStyle: false
|
||
})
|
||
],
|
||
dts: true,
|
||
include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/],
|
||
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/, '')
|
||
}
|
||
}
|
||
// proxy: {
|
||
// '^/dev-api': {
|
||
// target: ''
|
||
// }
|
||
// }
|
||
},
|
||
optimizeDeps: {
|
||
// include: ['element-plus']
|
||
},
|
||
build: {
|
||
chunkSizeWarningLimit: 1000,
|
||
rollupOptions: {
|
||
output: {
|
||
manualChunks(id) {
|
||
if (id.includes('node_modules')) {
|
||
// 将第三方库单独分包（如 axios、vue 等）
|
||
return id.split('node_modules/')[1].split('/')[0]
|
||
}
|
||
}
|
||
// chunkFileNames: 'static/js/[name]-[hash].js',
|
||
// entryFileNames: 'static/js/[name]-[hash].js',
|
||
// assetFileNames: 'static/[ext]/[name]-[hash].[ext]'
|
||
}
|
||
}
|
||
},
|
||
css: {
|
||
preprocessorOptions: {
|
||
scss: {
|
||
api: 'modern-compiler'
|
||
},
|
||
less: {
|
||
additionalData: `@import "@/styles/global.less";`,
|
||
javascriptEnabled: true
|
||
}
|
||
}
|
||
},
|
||
resolve: {
|
||
alias: {
|
||
'@': path.resolve(__dirname, 'src')
|
||
}
|
||
}
|
||
}))
|