vite打包拆分js和css的配置指南
更新時間：2023年09月17日 09:00:44 作者：還有多遠(yuǎn).
這篇文章主要給大家介紹了關(guān)于vite打包拆分js和css的配置指南,Vite是一個非?？焖俚墓ぞ?它可以幫助你打包JavaScript文件,需要的朋友可以參考下
最近開發(fā)了一個h5的系統(tǒng)，用的是vite + vue3 + ts 開發(fā)的，
打包之后發(fā)現(xiàn)vite會將所有的js和css文件都打在一個文件夾下，assets目錄，
所以 我總結(jié)了一份拆分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()
}
},
// 用于從入口點創(chuàng)建的塊的打包輸出格式[name]表示文件名,[hash]表示該文件內(nèi)容hash值
entryFileNames: 'js/[name].[hash].js',
// 用于命名代碼拆分時創(chuàng)建的共享塊的輸出命名
// chunkFileNames: 'js/[name].[hash].js',
// 用于輸出靜態(tài)資源的命名，[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屬性就好了，
打完之后就是這個樣子
親測可用?。?！
總結(jié)
到此這篇關(guān)于vite打包拆分js和css的文章就介紹到這了,更多相關(guān)vite打包拆分js和css內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
前端vue+element使用SM4國密加密解密的詳細(xì)實例
國密即國家密碼局認(rèn)定的國產(chǎn)密碼算法,主要有SM1,SM2,SM3,SM4,下面這篇文章主要給大家介紹了關(guān)于前端vue+element使用SM4國密加密解密的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要給大家介紹了關(guān)于vue3前端實現(xiàn)全屏顯示及元素垂直填滿頁面效果的相關(guān)資料,文中還給大家介紹了vue3實現(xiàn)某一個元素全屏之后就黑屏了的解決辦法,需要的朋友可以參考下2024-02-02
詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧
這篇文章主要介紹了詳解在Vue.js編寫更好的v-for循環(huán)的6種技巧，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
前端H5微信支付寶支付實現(xiàn)方法(uniapp為例)
最近上線一個項目,手機網(wǎng)站進(jìn)行調(diào)起支付寶App支付,做起來還是滿順手的,在此做個記錄,這篇文章主要給大家介紹了關(guān)于前端H5微信支付寶支付實現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2024-04-04
在日常開發(fā)中,Vue 項目中的表單布局和樣式優(yōu)化是一個重要的環(huán)節(jié),通過合理的布局與美觀的樣式設(shè)計,不僅可以提升用戶體驗,還能增加頁面的實用性和觀賞性,本文將總結(jié)幾個常見的表單和表格布局優(yōu)化的技巧,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了uniapp引入模塊化js文件和非模塊化js文件的四種方式，本文結(jié)合實例代碼給大家講解的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了推薦VSCode 上特別好用的 Vue 插件之vetur，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-09-09
在vue中通過render函數(shù)給子組件設(shè)置ref操作
這篇文章主要介紹了在vue中通過render函數(shù)給子組件設(shè)置ref操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
Vue如何實現(xiàn)利用vuex永久儲存數(shù)據(jù)
這篇文章主要介紹了Vue如何實現(xiàn)利用vuex永久儲存數(shù)據(jù)問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
vue.js 雙層嵌套for遍歷的方法詳解, 類似php foreach()
今天小編就為大家分享一篇vue.js 雙層嵌套for遍歷的方法詳解, 類似php foreach()，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09