前言：在 Vite 项目中使用 npm run build 直接打包，打包后所有的静态文件都在 assets 文件中，js、css、图片等都放在一起看着很不舒服。我们可以通过配置 vite.config.js 来进行分包处理。打包机制底层是使用的 roolup，可以参考 rollup 官网。
vite.config.js 分包配置如下，备注写明字段用途，其中 [name] 、[hash] 、[ext] 是 rollup 中的展位符。
import { defineConfig } from "vite"; import vue from "@vitejs/plugin-vue"; export default defineConfig({ plugins: [vue()], build: { // 配置 rollup 选项 rollupOptions: { // 影响打包输出结果 output: { // 入口 js 文件 entryFileNames: "js/[name]-[hash].js", // 影响分包结果 chunkFileNames: "js/[name]-[hash].js", // 除了 js 的其他文件 assetFileNames(assetInfo) { if (assetInfo.name.endsWith(".css")) { return "css/[name]-[hash].css"; } const imgExts = [ ".png", ".jpg", ".jpeg", ".webp", ".svg", ".gif", ".icon", ]; if (imgExts.some((ext) => assetInfo.name.endsWith(ext))) { return "imgs/[name]-[hash][ext]"; } return "assets/[name]-[hash].[ext]"; }, }, }, }, });
