vite打包拆分js和css的配置指南
作者：还有多远.
这篇文章主要给大家介绍了关于vite打包拆分js和css的配置指南,Vite是一个非常快速的工具,它可以帮助你打包JavaScript文件,需要的朋友可以参考下
最近开发了一个h5的系统，用的是vite + vue3 + ts 开发的，
打包之后发现vite会将所有的js和css文件都打在一个文件夹下，assets目录，
所以 我总结了一份拆分js和css的配置，将js和css分别打在不同目录下
配置如下：
build: {
chunkSizeWarningLimit: 1500,
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',
// 用于命名代码拆分时创建的共享块的输出命名
// chunkFileNames: '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.config.js文件里添加build属性就好了，
打完之后就是这个样子
亲测可用！！！
总结
到此这篇关于vite打包拆分js和css的文章就介绍到这了,更多相关vite打包拆分js和css内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！