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')) {
            return 'assets/css/[name]' + assetInfo.names[0];
          } 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'
    //   ]
    // }
  }
})

import { fileURLToPath, URL } from 'node:url';

import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueDevTools from 'vite-plugin-vue-devtools';
import { createHtmlPlugin } from 'vite-plugin-html';

// https://vite.dev/config/
export default defineConfig(({ command, mode }) => {
  const env = loadEnv(mode, process.cwd(), '');

  return {
    plugins: [
      vue(),
      vueDevTools(),
      createHtmlPlugin({
        inject: {
          data: {
            iconUrl: env.VITE_ICON_URL
          }
        }
      })
    ],
    resolve: {
      extensions: ['.js', '.jsx', '.ts', '.tsx', '.json', '.vue'],
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    },
    base: env.VITE_BASE_URL,
    server: {
      port: 8086,
      open: true,
      proxy: {
        '/api': {
          target: env.VITE_API_PROXY_URL, // 测试环境

          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '/api')
        }
      }
    }, // 分包配置
    build: {
      chunkSizeWarningLimit: 1500,
      outDir: 'dist/personallawyerwebadmin',
      rollupOptions: {
        output: {
          // 把node_modules最小化拆分包
          manualChunks(id) {
            if (
              id.includes('node_modules') &&
              (id.endsWith('.js') || id.endsWith('.ts'))
            ) {
              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')) {
              return 'assets/css/[name]' + assetInfo.names[0];
            } 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'
      //   ]
      // }
    }
  };
});