前言:在 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]";
},
},
},
},
});