import { resolve } from 'path' import { loadEnv } from 'vite' import type { UserConfig, ConfigEnv } from 'vite' import Vue from '@vitejs/plugin-vue' import WindiCSS from 'vite-plugin-windicss' import VueJsx from '@vitejs/plugin-vue-jsx' import EslintPlugin from 'vite-plugin-eslint' import VueI18n from '@intlify/vite-plugin-vue-i18n' import Components from 'unplugin-vue-components/vite' import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' import { createStyleImportPlugin, ElementPlusResolve, VxeTableResolve } from 'vite-plugin-style-import' import { createSvgIconsPlugin } from 'vite-plugin-svg-icons' import PurgeIcons from 'vite-plugin-purge-icons' import { createHtmlPlugin } from 'vite-plugin-html' import viteCompression from 'vite-plugin-compression' import VueMarcos from 'unplugin-vue-macros/vite' // 当前执行node命令时文件夹的地址(工作目录) const root = process.cwd() // 路径查找 function pathResolve(dir: string) { return resolve(root, '.', dir) } // https://vitejs.dev/config/ export default ({ command, mode }: ConfigEnv): UserConfig => { let env = {} as any const isBuild = command === 'build' if (!isBuild) { env = loadEnv((process.argv[3] === '--mode' ? process.argv[4] : process.argv[3]), root) } else { env = loadEnv(mode, root) } return { base: env.VITE_BASE_PATH, root: root, // 服务端渲染 server: { // 是否开启 https https: false, // 端口号 port: env.VITE_PORT, host: "0.0.0.0", open: env.VITE_OPEN, // 本地跨域代理 proxy: { ['/dev-api']: { target: env.VITE_BASE_URL, ws: false, changeOrigin: true, rewrite: (path) => path.replace(new RegExp(`^/dev-api`), ''), }, }, }, plugins: [ Vue(), VueJsx(), WindiCSS(), createStyleImportPlugin({ resolves: [ElementPlusResolve(),VxeTableResolve()], libs: [{ libraryName: 'element-plus', esModule: true, resolveStyle: (name) => { return `element-plus/es/components/${name.substring(3)}/style/css` } },{ libraryName: 'vxe-table', esModule: true, resolveStyle: (name) => { return `vxe-table/es/${name}/style.css` } }] }), Components({ // 要搜索组件的目录的相对路径 dirs: ['src/components'], // 组件的有效文件扩展名 extensions: ['vue', 'md'], // 搜索子目录 deep: true, include: [/\.vue$/, /\.vue\?vue/], // 生成自定义 `auto-components.d.ts` 全局声明 dts: 'src/auto-components.d.ts', // 自定义组件的解析器 resolvers: [ElementPlusResolver()], exclude: [/[\\/]node_modules[\\/]/] }), EslintPlugin({ cache: false, include: ['src/**/*.vue', 'src/**/*.ts', 'src/**/*.tsx'] // 检查的文件 }), VueI18n({ runtimeOnly: true, compositionOnly: true, include: [resolve(__dirname, 'src/locales/**')] }), createSvgIconsPlugin({ iconDirs: [pathResolve('src/assets/svgs')], symbolId: 'icon-[dir]-[name]', svgoOptions: true }), PurgeIcons(), VueMarcos(), viteCompression({ verbose: true, // 是否在控制台输出压缩结果 disable: true, // 是否禁用 threshold: 10240, // 体积大于 threshold 才会被压缩,单位 b algorithm: 'gzip', // 压缩算法,可选 [ 'gzip' , 'brotliCompress' ,'deflate' , 'deflateRaw'] ext: '.gz', // 生成的压缩包后缀 deleteOriginFile: false //压缩后是否删除源文件 }), createHtmlPlugin({ inject: { data: { title: env.VITE_APP_TITLE, injectScript: `` } } }) ], css: { preprocessorOptions: { less: { additionalData: '@import "./src/styles/variables.module.less";', javascriptEnabled: true } } }, resolve: { extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less', '.css'], alias: [ { find: 'vue-i18n', replacement: 'vue-i18n/dist/vue-i18n.cjs.js' }, { find: /\@\//, replacement: `${pathResolve('src')}/` } ] }, build: { minify: 'terser', outDir: env.VITE_OUT_DIR || 'dist', sourcemap: env.VITE_SOURCEMAP === 'true' ? 'inline' : false, // brotliSize: false, terserOptions: { compress: { drop_debugger: env.VITE_DROP_DEBUGGER === 'true', drop_console: env.VITE_DROP_CONSOLE === 'true' } } }, optimizeDeps: { include: [ 'vue', 'vue-router', 'vue-types', 'vue-i18n', 'vxe-table', 'xe-utils', 'element-plus/es', 'element-plus/es/locale/lang/zh-cn', 'element-plus/es/locale/lang/en', '@iconify/iconify', '@vueuse/core', 'axios', 'qs', 'dayjs', 'echarts', 'echarts-wordcloud', 'intro.js', 'qrcode', 'pinia', 'crypto-js', '@wangeditor/editor', '@wangeditor/editor-for-vue' ] } } }