AutoWatch/vite.config.js

import vue from "@vitejs/plugin-vue";
import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";
import tailwindcss from '@tailwindcss/vite'
import { loadEnv } from 'vite'
import { resolve } from 'path'
import { createVitePlugins } from './build/vite/plugin'
import { versionPlugin } from './build/vite/plugin/versionPlugin'
import pkg from './package.json'
import proxy from './build/proxy'

function pathResolve(dir) {
  return resolve(process.cwd(), '.', dir)
}

export default({ command, mode }) =>{

  const root = process.cwd()

  const isBuild = command === 'build'

  const viteEnv = loadEnv(mode, root)

  const { VITE_BASE, VITE_OUT_DIR, VITE_DROP_DEBUGGER, VITE_DROP_CONSOLE, VITE_PORT } = viteEnv

  const now = new Date().getTime()

  const customArgs = process.argv.slice(3)
  const module = customArgs.find((m) => m.startsWith('module='))?.split('module=')[1]
  // const viteBase = module ? `/${VITE_BASE.replace(/\//g, '')}-${module}/` : VITE_BASE
  const viteBase = './'
  const viteOutDir = module ? `${VITE_OUT_DIR.split('-')[0]}-${module}` : VITE_OUT_DIR


  return {
    root,
    base: viteBase,
    define: {
      __APP_VERSION__: now,
    },
    plugins: [
      ...createVitePlugins(viteEnv, isBuild),
      versionPlugin({
        version: now,
      }),
      // vue(),
      tailwindcss(),
      AutoImport({
        resolvers: [ElementPlusResolver()],
      }),
      Components({
        resolvers: [ElementPlusResolver()],
      }),
    ],
    // resolve: {
    //   alias: {
    //     "@": path.resolve(__dirname, "./src"),
    //   },
    // },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `
            @use "@/styles/variables" as *;
            @use "@/styles/mixins" as *;
          `,
        }
      }
    },
    // 路径问题
    resolve: {
      extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json', '.less', '.css'],
      alias: [
        // @/xxxx => src/xxxx
        {
          find: /\@\//,
          replacement: `${pathResolve('src')}/`,
        },
      ],
    },
    build: {
      target: 'es2015',
      cssTarget: 'chrome83',
      outDir: viteOutDir,
      sourcemap: false,
      brotliSize: false,
      // 关闭brotliSize显示可以稍微减少打包时间
      reportCompressedSize: false,
      // 超大静态资源警告大小
      chunkSizeWarningLimit: 1500,
      minify: 'terser',
      terserOptions: {
        compress: {
          // 删除所有 debugger
          drop_debugger: VITE_DROP_DEBUGGER === 'true',
          // 删除所有 console
          drop_console: VITE_DROP_CONSOLE === 'true',
        },
      },
      rollupOptions: {
        treeshake: true,
        output: {
          // 设置chunk的文件名格式
          chunkFileNames: 'assets/js/[name].[hash].js',
          // 设置入口文件的文件名格式
          entryFileNames: 'assets/js/[name].[hash].js',
          // 设置静态资源文件的文件名格式
          assetFileNames: 'assets/[ext]/[name].[hash].[ext]',
          // 最小化拆分包
          manualChunks(id) {
            if (id.includes('node_modules')) {
              // 指定需要拆分的第三方库或模块
              const dependenciesKeys = Object.keys(pkg.dependencies)
              const match = dependenciesKeys.find((item) => {
                return id.includes(item)
              })

              if (match) {
                // 合并打包
                if (['vue', 'vue-router'].includes(match)) {
                  return 'vue'
                } else if (['element-plus', '@element-plus/icons-vue'].includes(match)) {
                  return 'element-plus-vendor'
                } else {
                  return match
                }
              }
            }
          },
        },
      },
    },
    server: {
      https: false,
      host: true,
      port: VITE_PORT,
      proxy,
    },
    test: {
      globals: true,
      environment: 'jsdom',
    },
  }
}