vite打包拆分js和css的配置指南
最近開(kāi)發(fā)了一個(gè)h5的系統(tǒng),用的是vite + vue3 + ts 開(kāi)發(fā)的,
打包之后發(fā)現(xiàn)vite會(huì)將所有的js和css文件都打在一個(gè)文件夾下,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()
}
},
// 用于從入口點(diǎn)創(chuàng)建的塊的打包輸出格式[name]表示文件名,[hash]表示該文件內(nèi)容hash值
entryFileNames: 'js/[name].[hash].js',
// 用于命名代碼拆分時(shí)創(chuàng)建的共享塊的輸出命名
// chunkFileNames: 'js/[name].[hash].js',
// 用于輸出靜態(tài)資源的命名,[ext]表示文件擴(kuò)展名
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屬性就好了,
打完之后就是這個(gè)樣子

親測(cè)可用?。?!
總結(jié)
到此這篇關(guān)于vite打包拆分js和css的文章就介紹到這了,更多相關(guān)vite打包拆分js和css內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
前端vue+element使用SM4國(guó)密加密解密的詳細(xì)實(shí)例
國(guó)密即國(guó)家密碼局認(rèn)定的國(guó)產(chǎn)密碼算法,主要有SM1,SM2,SM3,SM4,下面這篇文章主要給大家介紹了關(guān)于前端vue+element使用SM4國(guó)密加密解密的相關(guān)資料,需要的朋友可以參考下2023-03-03
vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁(yè)面效果
這篇文章主要給大家介紹了關(guān)于vue3前端實(shí)現(xiàn)全屏顯示及元素垂直填滿頁(yè)面效果的相關(guān)資料,文中還給大家介紹了vue3實(shí)現(xiàn)某一個(gè)元素全屏之后就黑屏了的解決辦法,需要的朋友可以參考下2024-02-02
詳解在Vue.js編寫(xiě)更好的v-for循環(huán)的6種技巧
這篇文章主要介紹了詳解在Vue.js編寫(xiě)更好的v-for循環(huán)的6種技巧,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
前端H5微信支付寶支付實(shí)現(xiàn)方法(uniapp為例)
最近上線一個(gè)項(xiàng)目,手機(jī)網(wǎng)站進(jìn)行調(diào)起支付寶App支付,做起來(lái)還是滿順手的,在此做個(gè)記錄,這篇文章主要給大家介紹了關(guān)于前端H5微信支付寶支付實(shí)現(xiàn)方法的相關(guān)資料,需要的朋友可以參考下2024-04-04
在vue中通過(guò)render函數(shù)給子組件設(shè)置ref操作
這篇文章主要介紹了在vue中通過(guò)render函數(shù)給子組件設(shè)置ref操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11
Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)
這篇文章主要介紹了Vue如何實(shí)現(xiàn)利用vuex永久儲(chǔ)存數(shù)據(jù)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-04-04
vue.js 雙層嵌套for遍歷的方法詳解, 類(lèi)似php foreach()
今天小編就為大家分享一篇vue.js 雙層嵌套for遍歷的方法詳解, 類(lèi)似php foreach(),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09

