vue3+ts vite打包結(jié)構(gòu)控制通過rollup進(jìn)行配置方式
vue3+ts vite打包結(jié)構(gòu)控制通過rollup進(jìn)行配置
默認(rèn)配置的打包結(jié)構(gòu)

在vite.config.ts中進(jìn)行rollup的配置
使用output.entryFileNames 配置入口文件的打包輸出
官方文檔https://www.rollupjs.com/configuration-options/#output-chunkfilenames
- vite.config.ts
import { defineConfig } from 'vite'
import { createVitePlugins } from './build/vite'
import { createViteBuild } from './build/vite/build'
// https://vite.dev/config/
export default defineConfig({
plugins: createVitePlugins(),
build: createViteBuild(),
})
- 導(dǎo)入的/build/vite/build
export function createViteBuild() {
return {
rollupOptions: {
output: {
entryFileNames: 'assets/js/[name]-[hash].js', // 入口文件輸出配置
chunkFileNames: 'assets/js/[name]-[hash].js', // 代碼分割文件輸出配置
/*
assetFileNames: 用于配置靜態(tài)資源的輸出文件名該選項(xiàng)的值是一個(gè)匹配模式,用于自定義構(gòu)建結(jié)果中的靜態(tài)資源名稱,或者值為一個(gè)函數(shù),
對(duì)每個(gè)資源調(diào)用以返回匹配模式。這種模式支持以下的占位符:
*/
assetFileNames: (assetInfo: any) => {
console.log('assetInfo', assetInfo)
const extType = assetInfo.name?.split('.').at(-1)
if (extType === 'css') {
return 'assets/css/[name]-[hash][extname]' // css 文件輸出配置
} else if (extType === 'woff' || extType === 'woff2') {
return 'assets/fonts/[name]-[hash][extname]' // 字體文件輸出配置
} else if (['jpeg', 'jpg', 'png', 'svg', 'gif'].includes(extType)) {
return 'assets/images/[name]-[hash][extname]' // 圖片文件輸出配置
} else {
return 'assets/[name]-[hash][extname]' // 其他文件輸出配置
}
}
}
}
}
}
- 輸出結(jié)果

總結(jié)
以上為個(gè)人經(jīng)驗(yàn),希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
vue打包npm run build時(shí)候界面報(bào)錯(cuò)的解決
這篇文章主要介紹了vue打包npm run build時(shí)候界面報(bào)錯(cuò)的解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-08-08
ant design vue中日期選擇框混合時(shí)間選擇器的用法說明
這篇文章主要介紹了ant design vue中日期選擇框混合時(shí)間選擇器的用法說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-10-10
vue使用自定義事件的表單輸入組件用法詳解【日期組件與貨幣組件】
這篇文章主要介紹了vue使用自定義事件的表單輸入組件用法,結(jié)合實(shí)例形式詳細(xì)分析了vue.js日期組件與貨幣組件相關(guān)操作技巧及注意事項(xiàng),需要的朋友可以參考下2020-06-06
vue-json-viewer展示JSON內(nèi)容實(shí)踐
這篇文章主要介紹了vue-json-viewer展示JSON內(nèi)容實(shí)踐,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2026-03-03
vue-element-admin?登陸及目錄權(quán)限控制的實(shí)現(xiàn)
本文主要介紹了vue-element-admin?登陸及目錄權(quán)限控制的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
客戶端(vue框架)與服務(wù)器(koa框架)通信及服務(wù)器跨域配置詳解
本篇文章主要介紹了客戶端(vue框架)與服務(wù)器(koa框架)通信及服務(wù)器跨域配置詳解,具有一定的參考價(jià)值,有興趣的可以了解一下2017-08-08
vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式
這篇文章主要介紹了vant-ui組件庫中如何修改NavBar導(dǎo)航欄的樣式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-08-08
在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹
這篇文章主要介紹了在vue中使用inheritAttrs實(shí)現(xiàn)組件的擴(kuò)展性介紹,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2020-12-12

