|
|
import { defineConfig, loadEnv } from 'vite'; // 导入 Vite 的定义配置函数和环境变量加载函数
|
|
|
import vue from '@vitejs/plugin-vue'; // 导入 Vue 插件，使 Vite 支持 .vue 文件
|
|
|
import path from 'path'; // Node.js 标准库，用于处理和转换文件路径
|
|
|
import AutoImport from 'unplugin-auto-import/vite'; // 自动导入 API 插件
|
|
|
import Components from 'unplugin-vue-components/vite'; // 自动注册组件插件
|
|
|
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'; // 组件解析器，用于自动导入 Element Plus 组件
|
|
|
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'; // SVG 图标插件，将 SVG 文件转化为 Vue 组件
|
|
|
import viteCompression from 'vite-plugin-compression'; // 压缩构建输出文件的插件
|
|
|
|
|
|
// ESLint 插件，用于在开发期间进行代码检查
|
|
|
import eslintPlugin from 'vite-plugin-eslint';
|
|
|
|
|
|
export default defineConfig(({ command }) => ({
|
|
|
plugins: [
|
|
|
vue(), // 启用 Vue 插件
|
|
|
|
|
|
// 创建 SVG 图标插件实例，配置图标目录和生成的 symbol ID 模板
|
|
|
createSvgIconsPlugin({
|
|
|
iconDirs: [path.resolve(process.cwd(), 'src/icons/svg')],
|
|
|
symbolId: 'icon-[dir]-[name]'
|
|
|
}),
|
|
|
|
|
|
// 配置 AutoImport 插件以自动导入指定模块中的内容
|
|
|
AutoImport({
|
|
|
imports: ['vue', 'vue-router'], // 指定要自动导入的模块
|
|
|
dirs: ['src/hooks/**', 'src/stores/**', 'src/utils/**'], // 包含自定义钩子、状态管理、工具函数的目录
|
|
|
resolvers: command === 'build' ? [ElementPlusResolver()] : [], // 构建时使用 ElementPlusResolver 解析器
|
|
|
dts: 'src/auto-import/imports.d.ts', // 自动生成类型声明文件的位置
|
|
|
eslintrc: {
|
|
|
enabled: false // 禁用对 .eslintrc 文件的自动更新
|
|
|
}
|
|
|
}),
|
|
|
|
|
|
// 自动注册来自特定目录的 Vue 组件，并可选地使用解析器来处理第三方库中的组件
|
|
|
Components({
|
|
|
dirs: ['src/components'], // 包含组件的目录
|
|
|
resolvers: command === 'build' ? [ElementPlusResolver()] : [], // 构建时使用 ElementPlusResolver 解析器
|
|
|
dts: 'src/auto-import/components.d.ts' // 自动生成类型声明文件的位置
|
|
|
}),
|
|
|
|
|
|
// 使用 ESLint 插件检查 JavaScript 和 Vue 文件
|
|
|
eslintPlugin({
|
|
|
include: ['src/**/*.js', 'src/**/*.vue', 'src/*.js', 'src/*.vue'] // 指定要检查的文件模式
|
|
|
}),
|
|
|
|
|
|
// 对超过 1KB 的文件启用 gzip 或 brotli 压缩
|
|
|
viteCompression({
|
|
|
threshold: 1000,
|
|
|
})
|
|
|
],
|
|
|
|
|
|
// 开发服务器配置
|
|
|
server: {
|
|
|
host: true, // 允许外部访问
|
|
|
port: 9527, // 设置服务端口
|
|
|
open: true // 在启动时自动打开浏览器
|
|
|
},
|
|
|
|
|
|
// 路径别名配置
|
|
|
resolve: {
|
|
|
alias: {
|
|
|
'@': path.resolve(__dirname, 'src'), // 将 @ 替换为 src 目录的绝对路径
|
|
|
'vue-i18n': 'vue-i18n/dist/vue-i18n.cjs.js' // 强制使用兼容性更好的 vue-i18n 版本
|
|
|
}
|
|
|
},
|
|
|
|
|
|
// 构建选项
|
|
|
build: {
|
|
|
base: './', // 构建后的资源基础路径
|
|
|
rollupOptions: {
|
|
|
output: {
|
|
|
chunkFileNames: 'static/js/[name]-[hash].js', // 动态导入的代码分割块命名规则
|
|
|
entryFileNames: 'static/js/[name]-[hash].js', // 入口文件命名规则
|
|
|
assetFileNames: 'static/[ext]/[name]-[hash].[ext]', // 静态资源（如图片、字体等）命名规则
|
|
|
|
|
|
// 手动拆分 chunks，通常用于优化包大小和缓存策略
|
|
|
manualChunks(id) {
|
|
|
if (id.includes('node_modules')) {
|
|
|
if (id.toString().indexOf('.pnpm/') !== -1) {
|
|
|
return id.toString().split('.pnpm/')[1].split('/')[0].toString();
|
|
|
} else if (id.toString().indexOf('node_modules/') !== -1) {
|
|
|
return id.toString().split('node_modules/')[1].split('/')[0].toString();
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
sourcemap: false, // 是否生成 source map 文件
|
|
|
target: 'es2015', // 设置打包后代码的目标浏览器或 Node.js 版本
|
|
|
reportCompressedSize: false // 不报告压缩后的包大小
|
|
|
}
|
|
|
}));
|
