vite打包拆分js和css的配置指南
更新時(shí)間：2023年09月17日 09:00:44 作者：還有多遠(yuǎn).
這篇文章主要給大家介紹了關(guān)于vite打包拆分js和css的配置指南,Vite是一個(gè)非?？焖俚墓ぞ?它可以幫助你打包JavaScript文件,需要的朋友可以參考下
最近開(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
在日常開(kāi)發(fā)中,Vue 項(xiàng)目中的表單布局和樣式優(yōu)化是一個(gè)重要的環(huán)節(jié),通過(guò)合理的布局與美觀的樣式設(shè)計(jì),不僅可以提升用戶體驗(yàn),還能增加頁(yè)面的實(shí)用性和觀賞性,本文將總結(jié)幾個(gè)常見(jiàn)的表單和表格布局優(yōu)化的技巧,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了uniapp引入模塊化js文件和非模塊化js文件的四種方式，本文結(jié)合實(shí)例代碼給大家講解的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-11-11
這篇文章主要介紹了推薦VSCode 上特別好用的 Vue 插件之vetur，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-09-09
在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