vue3+ts vite打包结构控制通过rollup进行配置方式
更新时间:2025年06月18日 17:07:39 作者:沉迷...
这篇文章主要介绍了vue3+ts vite打包结构控制通过rollup进行配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue3+ts vite打包结构控制通过rollup进行配置
默认配置的打包结构

在vite.config.ts中进行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(),
})
- 导入的/build/vite/build
export function createViteBuild() {
return {
rollupOptions: {
output: {
entryFileNames: 'assets/js/[name]-[hash].js', // 入口文件输出配置
chunkFileNames: 'assets/js/[name]-[hash].js', // 代码分割文件输出配置
/*
assetFileNames: 用于配置静态资源的输出文件名该选项的值是一个匹配模式,用于自定义构建结果中的静态资源名称,或者值为一个函数,
对每个资源调用以返回匹配模式。这种模式支持以下的占位符:
*/
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]' // 其他文件输出配置
}
}
}
}
}
}
- 输出结果

总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
ant design vue中日期选择框混合时间选择器的用法说明
这篇文章主要介绍了ant design vue中日期选择框混合时间选择器的用法说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-10-10
vue使用自定义事件的表单输入组件用法详解【日期组件与货币组件】
这篇文章主要介绍了vue使用自定义事件的表单输入组件用法,结合实例形式详细分析了vue.js日期组件与货币组件相关操作技巧及注意事项,需要的朋友可以参考下2020-06-06
vue-element-admin 登陆及目录权限控制的实现
本文主要介绍了vue-element-admin 登陆及目录权限控制的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2022-04-04
客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解
本篇文章主要介绍了客户端(vue框架)与服务器(koa框架)通信及服务器跨域配置详解,具有一定的参考价值,有兴趣的可以了解一下2017-08-08


最新评论