vite打包解构控制

vite打包默认将打包结果统一放入assets文件夹内，如何通过打包配置，来将不同静态资源分别打包在不同文件夹内，如 js css img等!

配置vite.config.js

{
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vue: ['vue', 'vue-router', 'pinia'],
          elementui: ['element-plus'],
          axios: ['axios'],
        },
        entryFileNames: `js/[name].[hash].js`,
        chunkFileNames: `js/[name].[hash].js`,
        assetFileNames(assetInfo) {
          if (assetInfo.names[0]?.endsWith('.css')) {
            return `css/[name].[hash].[ext]`
          }
          const imgExt = ['.png', '.jpg', '.jpeg', '.gif', '.svg']
          if (imgExt.includes(assetInfo.names[0].substring(assetInfo.names[0].lastIndexOf('.')))) {
            return `img/[name].[hash].[ext]`
          }
          return `assets/[name].[hash].[ext]`
        },
      },
    },
}

• entryFileNames: 入口文件打包的输出目录!

• chunkFileNames: chunk文件打包的输出目录!

• assetFileNames: 静态文件的打包输出目录，可以是个函数

• manualChunks : 手动分包配置，将第三方库进行单独打包，防止自己编写的代码在每次变动时，重复去打包不经常变动的第三方库!