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]' // 其他文件输出配置
          }
        }
      }
    }
  }
}
  • 输出结果

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vuex状态管理数据状态查询与更改方式

    vuex状态管理数据状态查询与更改方式

    这篇文章主要介绍了vuex状态管理数据状态查询与更改方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 使用Bootrap和Vue实现仿百度搜索功能

    使用Bootrap和Vue实现仿百度搜索功能

    这篇文章主要介绍了使用Bootrap和Vue实现仿百度搜索功能,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-10-10
  • vue3.0透传属性和事件的使用方式举例

    vue3.0透传属性和事件的使用方式举例

    这篇文章主要给大家介绍了关于vue3.0透传属性和事件使用的相关资料,透传attribute指的是传递给一个组件,却没有被该组件声明为props或emits的attribute或者v-on事件监听器,需要的朋友可以参考下
    2024-01-01
  • vue跳转方式的常见方式以及区别分析

    vue跳转方式的常见方式以及区别分析

    在Vue.js中页面跳转是前端开发中常见的需求,Vue提供了多种页面跳转方式,这篇文章主要给大家介绍了关于vue跳转方式的常见方式以及区别分析的相关资料,需要的朋友可以参考下
    2024-02-02
  • VUE跨域详解以及常用解决跨域的方法

    VUE跨域详解以及常用解决跨域的方法

    跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据,下面这篇文章主要给大家介绍了关于VUE跨域详解以及常用解决跨域的方法,文中通过示例代码介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • vue中异步数据获取方式(确保数据被获取)

    vue中异步数据获取方式(确保数据被获取)

    这篇文章主要介绍了vue中异步数据获取方式(确保数据被获取),具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-01-01
  • Vue3中的defineExpose函数用法深入解析

    Vue3中的defineExpose函数用法深入解析

    这篇文章主要介绍了Vue3中的defineExpose函数用法的相关资料,defineExpose是Vue3中用于在模式下暴露组件内部属性和方法的辅助函数,它允许父组件通过ref访问子组件的暴露内容,提高组件间的交互能力并保持封装性,需要的朋友可以参考下
    2025-01-01
  • springboot和vue前后端交互的实现示例

    springboot和vue前后端交互的实现示例

    本文主要介绍了springboot和vue前后端交互的实现示例,将包括一个简单的Vue.js前端应用程序,用于发送GET请求到一个Spring Boot后端应用程序,以获取并显示用户列表,感兴趣的可以了解一下
    2024-05-05
  • vue v-on传递参数和事件修饰符的使用

    vue v-on传递参数和事件修饰符的使用

    本文主要介绍了vue v-on传递参数和事件修饰符的使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2024-01-01
  • vue基于elementUI表格状态判断展示方式

    vue基于elementUI表格状态判断展示方式

    这篇文章主要介绍了vue基于elementUI表格状态判断展示方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-10-10

最新评论