vue3+ts vite打包結(jié)構(gòu)控制通過(guò)rollup進(jìn)行配置方式
更新時(shí)間：2025年06月18日 17:07:39 作者：沉迷...
這篇文章主要介紹了vue3+ts vite打包結(jié)構(gòu)控制通過(guò)rollup進(jìn)行配置方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
vue3+ts vite打包結(jié)構(gòu)控制通過(guò)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)資源名稱(chēng)，或者值為一個(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)文章
vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢(xún)與更改方式
這篇文章主要介紹了vuex狀態(tài)管理數(shù)據(jù)狀態(tài)查詢(xún)與更改方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
使用Bootrap和Vue實(shí)現(xiàn)仿百度搜索功能
這篇文章主要介紹了使用Bootrap和Vue實(shí)現(xiàn)仿百度搜索功能,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-10-10
這篇文章主要給大家介紹了關(guān)于vue3.0透?jìng)鲗傩院褪录褂玫南嚓P(guān)資料,透?jìng)鱝ttribute指的是傳遞給一個(gè)組件,卻沒(méi)有被該組件聲明為props或emits的attribute或者v-on事件監(jiān)聽(tīng)器,需要的朋友可以參考下2024-01-01
vue跳轉(zhuǎn)方式的常見(jiàn)方式以及區(qū)別分析
在Vue.js中頁(yè)面跳轉(zhuǎn)是前端開(kāi)發(fā)中常見(jiàn)的需求,Vue提供了多種頁(yè)面跳轉(zhuǎn)方式,這篇文章主要給大家介紹了關(guān)于vue跳轉(zhuǎn)方式的常見(jiàn)方式以及區(qū)別分析的相關(guān)資料,需要的朋友可以參考下2024-02-02
跨域指瀏覽器不允許當(dāng)前頁(yè)面的所在的源去請(qǐng)求另一個(gè)源的數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于VUE跨域詳解以及常用解決跨域的方法,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07
vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)
這篇文章主要介紹了vue中異步數(shù)據(jù)獲取方式(確保數(shù)據(jù)被獲取)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue3中的defineExpose函數(shù)用法深入解析
這篇文章主要介紹了Vue3中的defineExpose函數(shù)用法的相關(guān)資料,defineExpose是Vue3中用于在模式下暴露組件內(nèi)部屬性和方法的輔助函數(shù),它允許父組件通過(guò)ref訪(fǎng)問(wèn)子組件的暴露內(nèi)容,提高組件間的交互能力并保持封裝性,需要的朋友可以參考下2025-01-01
springboot和vue前后端交互的實(shí)現(xiàn)示例
本文主要介紹了springboot和vue前后端交互的實(shí)現(xiàn)示例,將包括一個(gè)簡(jiǎn)單的Vue.js前端應(yīng)用程序,用于發(fā)送GET請(qǐng)求到一個(gè)Spring Boot后端應(yīng)用程序,以獲取并顯示用戶(hù)列表,感興趣的可以了解一下2024-05-05
本文主要介紹了vue v-on傳遞參數(shù)和事件修飾符的使用,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2024-01-01
這篇文章主要介紹了vue基于elementUI表格狀態(tài)判斷展示方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10