vite打包打包资源分目录vue3

// https://vitejs.dev/config/
// vite.config.js
import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import commonjs from '@rollup/plugin-commonjs'
import vueJsx from '@vitejs/plugin-vue-jsx'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
import ElementPlus from 'unplugin-element-plus/vite'
// import requireTransform from 'vite-plugin-require-transform'
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'
import path from 'path'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    commonjs(), // 配置commonjs
    // requireTransform({
    //   fileRegex: /.js$|.vue$|.png$|.ts$|.jpg$|.svg$/
    // }), //配置require
    vue(),
    vueJsx(),
    AutoImport({
      resolvers: [ElementPlusResolver()]
    }),
    Components({
      resolvers: [ElementPlusResolver({ importStyle: 'sass' })]
    }),
    // 按需定制主题配置
    ElementPlus({
      useSource: true
    }),
    createSvgIconsPlugin({
      iconDirs: [path.resolve(__dirname, 'src/assets/icons/svg')],
      symbolId: 'icon-[name]', // symbol的id
      inject: 'body-last', // 插入的位置
      customDomId: '__svg__icons__dom__' // svg的id
    })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
      scss: {
        // 自动导入定制化样式文件进行样式覆盖
        additionalData: `
          @use "@/styles/element/index.scss" as *;
          @use "@/styles/var.scss" as *;
        `
      }
    }
  },
  server: {
    open: true,
    proxy: {
      '/api/': {
        // target: 'http://101.254.123.4:8089', // 辽宁沈阳朝阳故指项目接口
        target: 'http://192.168.1.195:8089', // 配电网故障定位系统2.0测试环境
        // target: 'http://192.168.1.31:8089', // 后端个人后台服务联调

        // target: 'http://101.254.123.4:8088', // 昌平服务器

        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  },

  // 分包配置
  build: {
    chunkSizeWarningLimit: 1500,
    outDir: 'dist/scoutweb',
    rollupOptions: {
      output: {
        // 最小化拆分包
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.toString().split('node_modules/')[1].split('/')[0].toString()
          }
        },
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'js/[name].[hash].js',
        // 用于命名代码拆分时创建的共享块的输出命名
        // hunkFileNames: 'js/[name].[hash].js',
        // 用于输出静态资源的命名，[ext]表示文件扩展名
        // assetFileNames: '[ext]/[name].[hash].[ext]',
        // 拆分js到模块文件夹
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : []
          const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]'
          return `js/${fileName}/[name].[hash].js`
        },
        // vite打包把css 图片 音频都分开打包
        assetFileNames: (assetInfo) => {
          // 根据不同的导入类型，指定不同的输出目录
          const imgExts = ['png', 'jpg', 'jpeg', 'svg', 'gif', 'webp', 'ico'];
          const mediaExts = ['mp4', 'webm', 'ogg', 'mp3', 'wav', 'flac', 'aac'];
          if (assetInfo.names[0].endsWith('.css')) {
            // 从 CSS 文件的源路径中提取目录信息
            let fileName = 'common';

            // 从 originalFileNames 中获取源文件路径
            if (
              assetInfo.originalFileNames &&
              assetInfo.originalFileNames.length > 0
            ) {
              const originalPath = assetInfo.originalFileNames[0];
              // 提取路径中的目录名，例如从 'src/views/Layout/waveQualitystatistics/index.vue' 中提取 'waveQualitystatistics'
              const pathParts = originalPath.split('/');
              // 获取倒数第二个部分（文件所在的直接目录）
              if (pathParts.length >= 2) {
                fileName = pathParts[pathParts.length - 2];
              }
            }

            // 如果还是没有找到合适的名称，尝试从文件名本身提取
            if (
              fileName === 'common' &&
              assetInfo.names &&
              assetInfo.names[0]
            ) {
              const cssFileName = assetInfo.names[0].replace('.css', '');
              // 如果不是 index 或 main 这样的通用名称，就使用它
              if (
                cssFileName !== 'index' &&
                cssFileName !== 'main' &&
                cssFileName !== 'style'
              ) {
                fileName = cssFileName;
              }
            }

            return `assets/css/${fileName}/[name].[hash].css`;
          } else if (imgExts.some((ext) => assetInfo.names[0].endsWith(ext))) {
            return 'assets/images/' + assetInfo.names[0];
          } else if (
            mediaExts.some((ext) => assetInfo.names[0].endsWith(ext))
          ) {
            return 'assets/media/' + assetInfo.names[0];
          }
          // 其他资源保持原样
          return 'assets/' + assetInfo.names[0];
        }
      }
    },
     // commonjsOptions: {
    //   include: [
    //     'node_modules/.pnpm/dayjs@1.11.3/node_modules/dayjs/dayjs.min.js',
    //     'node_modules/.pnpm/dayjs@1.11.3/node_modules/dayjs/plugin/customParseFormat.js',
    //     'node_modules/.pnpm/dayjs@1.11.3/node_modules/dayjs/plugin/localeData.js',
    //     'node_modules/.pnpm/dayjs@1.11.3/node_modules/dayjs/plugin/advancedFormat.js',
    //     'node_modules/.pnpm/dayjs@1.11.3/node_modules/dayjs/plugin/weekOfYear.js',
    //     'node_modules/.pnpm/dayjs@1.11.3/node_modules/dayjs/plugin/weekYear.js',
    //     'node_modules/.pnpm/dayjs@1.11.3/node_modules/dayjs/plugin/dayOfYear.js',
    //     'node_modules/.pnpm/dayjs@1.11.3/node_modules/dayjs/plugin/isSameOrAfter.js',
    //     'node_modules/.pnpm/dayjs@1.11.3/node_modules/dayjs/plugin/isSameOrBefore.js',
    //     'node_modules/.pnpm/escape-html@1.0.3/node_modules/escape-html/index.js'
    //   ]
    // }
  }
})

注意：css一定要用打包使用哈希，不然在edge等浏览器的时候，重新打包部署以后，刷新会出现css乱了的情况，因为加载的是浏览器缓存的旧资源，加了哈希之后，因为文件会认定不同了，会加载新的资源。