@tianyio/quality-helper/templates/configs/build-tools/apps/vite.config.ts

A comprehensive quality helper tool for project scaffolding and management

import { defineConfig, mergeConfig, type UserConfig } from 'vite'
import { resolve } from 'path'
import federation from '@originjs/vite-plugin-federation'
import legacy from '@vitejs/plugin-legacy'
import VueDevTools from 'vite-plugin-vue-devtools'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import IconsResolver from 'unplugin-icons/resolver'
import Icons from 'unplugin-icons/vite'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
export default defineConfig(env => {
  const config: UserConfig = {
    // 路径别名
    resolve: {
      alias: {
        '@components': resolve(__dirname, 'src/components'),
        '@utils': resolve(__dirname, 'src/utils'),
        '@styles': resolve(__dirname, 'src/styles'),
        '@assets': resolve(__dirname, 'src/assets'),
        '@views': resolve(__dirname, 'src/views'),
        '@api': resolve(__dirname, 'src/api'),
      },
    },

    plugins: [
      ...(env.command === 'serve' ? [VueDevTools()] : []),
      // 浏览器兼容性插件 - 提供完整的旧版浏览器支持
      legacy({
        // 自动读取 .browserslistrc 配置
        // targets: 在 .browserslistrc 中配置

        // 额外的 polyfill 支持
        additionalLegacyPolyfills: [
          'regenerator-runtime/runtime', // async/await 支持
        ],

        // 现代浏览器 polyfill（按需加载）
        modernPolyfills: [
          'es.array.flat',
          'es.array.flat-map',
          'es.object.from-entries',
          'es.string.replace-all',
        ],

        // 渲染 legacy chunks 的条件
        renderLegacyChunks: true,

        // 生成 polyfill chunks
        polyfills: ['es.array.iterator', 'es.promise', 'es.object.assign', 'es.promise.finally'],
      }),
      federation({
        name: 'main-app',
        remotes: {
          'sub-app': 'http://localhost:5002/assets/sub-app.js',
        },
        filename: 'main-app.js',
        exposes: {
          './SubApp': './src/SubApp.vue',
        },
        shared: {
          vue: {
            requiredVersion: '^3.2.13',
          },
          'vue-router': {
            requiredVersion: '^4.0.12',
          },
          pinia: {
            requiredVersion: '^2.0.0-beta.1',
          },
        },
      }),
      AutoImport({
        dts: resolve(__dirname, './types/auto-imports.d.ts'), // 生成类型声明文件，提供完整的TypeScript支持
        imports: [
          // Vue 3 核心API
          'vue',
          // Vue Router
          'vue-router',
          // Pinia
          'pinia',
          {
            // VueUse 工具库 - 如果使用
            // '@vueuse/core': [
            //   // 常用钩子
            //   'useWindowSize',
            //   'useScroll',
            // ],
          },
        ],
        resolvers: [
          // UI库解析器
          // ElementPlusResolver({ importStyle: 'sass' })
          // AntDesignVueResolver()
        ],
        // 生成类型声明文件的配置
        eslintrc: {
          enabled: true, // 生成 .eslintrc-auto-import.json 文件
          filepath: resolve(__dirname, './.eslintrc-auto-import.json'), // 生成文件路径
          globalsPropValue: true, // 生成全局变量声明
        },
      }),
      Components({
        dts: resolve(__dirname, './types/components.d.ts'), // 生成类型声明文件，提供完整的TypeScript支持
        directoryAsNamespace: true, // 将目录作为命名空间
        // 解析器配置
        resolvers: [
          // UI库解析器(根据需要启用)
          // ElementPlusResolver({
          //   importStyle: 'sass'
          // }),
          // AntDesignVueResolver(),
          // 图标解析器
          IconsResolver({
            // 自动引入的Icon组件统一前缀，默认为 i，设置false为不需要前缀
            // prefix: 'icon',
            customCollections: ['custom'],
          }),
        ],
      }),
      Icons({
        compiler: 'vue3',
        customCollections: {
          // 这里是存放svg图标的文件地址，custom是自定义图标库的名称
          custom: FileSystemIconLoader('./src/assets/icons/svg/', (svg: string) =>
            svg.replace(/^<svg /, '<svg fill="currentColor" ')
          ),
        },
      }),
    ],

    // CSS 配置
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/styles/variables.scss";`,
        },
      },
    },

    // 开发服务器配置
    server: {
      port: 5173,
      open: true,
    },

    // 构建配置
    build: {
      rollupOptions: {
        /* input: {
          // 入口文件
          main: path.resolve(__dirname, 'index.html'),
          login: path.resolve(__dirname, 'login.html'),
        }, */
        output: {
          globals: {
            vue: 'Vue',
            lodash: '_',
          },
          manualChunks: {
            // 手动分割路由库为公共块
            router: ['vue-router'],
            vue: ['vue'], // 其他公共依赖
            pinia: ['pinia'],
            lodash: ['lodash', 'lodash-es'],
            vueuse: ['@vueuse/core'],
            axios: ['axios'],
            tcsl: ['@tianyio/fast-util-lib'],
          },
          // chunkFileNames: 'js/[name]-[hash].js', // 代码分割文件名
          // entryFileNames: 'js/[name]-[hash].js', // 入口文件名
          // assetFileNames: 'assets/[name]-[hash].[ext]', // 静态资源文件名
        },
      },
    },
  }
  return config
})