【Vite】控制Vite打包结构

Vite 打包后默认目录结构如下：

如果想要自定义目录结构，则需要手动配置。由于 Vite 使用 rollup 处理打包，所以需要使用 rollup 的配置选项，查看 Vite官方文档 可知该选项为 rollupOptions。

查看 rollup官方文档 output 选项会影响打包结果。其中

enteryFileNames 会影响入口文件的打包结果：

vite.config.js 中进行配置

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "js/[name]-[hash].js",
      },
    },
  },
})

由于 enteryFileNames 只处理入口文件，所以分包出去的 js 并没加入 js目录 下，查找rollup官方文档，需要使用 chunkFileNames 进行配置。

vite.config.js

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "js/[name]-[hash].js",
        chunkFileNames: "js/[name]-[hash].js",
      },
    },
  },
})

剩下的资源如 css、图片 等均可使用 assetFileNames 配置选项根据后缀动态生成目录

vite.config.js

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "js/[name]-[hash].js",
        chunkFileNames: "js/[name]-[hash].js",
        assetFileNames: "[ext]/[name]-[hash].[ext]",
      },
    },
  },
})

但是 jpg 和 png 同为图片，一起放在名为 img 的目录下即可，此时 assetFileNames 配置选项的字符串形式就不适用了，需要使用函数形式。

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "js/[name]-[hash].js",
        chunkFileNames: "js/[name]-[hash].js",
        assetFileNames(assetInfo) {
		  console.log(assetInfo)
		  return `[ext]/[name]-[hash].[ext]`
		},
      },
    },
  },
})

参数为资源信息，函数体内就可以通过 name 对资源进行分类

对资源后缀进行区分

export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        entryFileNames: "js/[name]-[hash].js",
        chunkFileNames: "js/[name]-[hash].js",
        assetFileNames(assetInfo) {
          if (assetInfo.name.endsWith(".css")) {
            return "css/[name]-[hash].css"
          }
          if (
            [".png", ".jpg", ".jpeg", ".svg", ".ico", ".webp"].some((item) =>
              assetInfo.name.endsWith(item)
            )
          ) {
            return "img/[name]-[hash].[ext]"
          }
          return `assets/[name]-[hash].[ext]`
        },
      },
    },
  },
})