vite 自定义打包资源输出至指定文件夹
1.vite打包情况介绍:
1.1vite在不进行任何配置的情况下,会将除开public的所有引用到资源打包编译添加哈希值至assets文件夹中(非引用文件以及行内样式图片未被打包编译资源会被treeSharp直接忽略不打包),
1.2webpack与vite打包区别:
1.2.1vite会将所有JS、CSS等文件都统一存放在assets中,不同于webpack会将会自动生成js、css、img文件夹进行分开存放。
1.2.2vite只会对public文件夹进行不打包处理,public文件夹内所有文件会移至dist中,webpack会将public和static文件进行不打包处理,存放至dist中
2.需求:vite根据不同的资源打包时分开文件夹存放
2.1在vite.config.js中配置vite打包参数(不对public文件夹资源进行任何操作)
export default { // ...其他配置 build: { rollupOptions: { output: { assetFileNames: (assetInfo) => { if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)$/.test(assetInfo.name)) { // 匹配资源文件后缀 return `media/[name].[hash][ext]`; // 创建media文件夹存放匹配的资源文件,name为该文件的原名,hash为哈希值,ext为文件后缀名,以[name].[hash][ext]命名规则 } return `assets/[name]-[hash].[ext]`; // 不匹配的资源文件存放至assets,以[name]-[hash].[ext]命名规则,注意两处的命名规则不同 }, }, }, }, // ...其他配置 };
2.2打包后资源生成命名规则不同的区别:
2.2.1图片、JS等资源文件可通过media/[name].[hash][ext]命名规则获取资源
2.2.1css文件不可使用上述规则,必须使用assets默认的命名规则,assets/[name]-[hash].[ext],否则无法获取该文件
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 单线程的Redis速度为什么快?
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决:字节Trae VS Cursor,谁才是开发者新宠?
· 展开说说关于C#中ORM框架的用法!