vite分目录打包及去掉默认的.gz 文件的操作方法

 更新时间:2024年09月25日 11:15:39   作者:vivk2017  
Vite在默认配置下会将资源打包至assets文件夹并添加哈希值,不同于Webpack的多文件夹存放方式,Vite只对public文件夹不进行打包处理,而Webpack不打包public和static文件夹,本文介绍vite分目录打包及去掉默认的.gz 文件的操作方法,感兴趣的朋友一起看看吧

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文件夹资源进行任何操作)

build: {
      outDir: 'dist',
      // assetsDir: 'public', // 静态资源目录
      rollupOptions: {
        output: {
          chunkFileNames: 'public/js/[name]-[hash].js',
          entryFileNames: 'public/js/[name]-[hash].js',
          assetFileNames: (assetInfo) => {
            if (/\.(png|svg|jpg|jpeg|gif|ttf)$/.test(assetInfo.name)) { // 匹配资源文件后缀
              return `public/img/[name]-[hash].[ext]`;  // 创建media文件夹存放匹配的资源文件,name为该文件的原名,hash为哈希值,ext为文件后缀名,以[name].[hash][ext]命名规则
            }
            return `public/css/[name]-[hash].[ext]`; // 不匹配的资源文件存放至assets,以[name]-[hash].[ext]命名规则,注意两处的命名规则不同
          },
        }
      }
    },`在这里插入代码片`
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],否则无法获取该文件

到此这篇关于vite分目录打包以及去掉默认的.gz 文件的文章就介绍到这了,更多相关vite分目录打包内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 详解Vue微信公众号开发踩坑全记录

    详解Vue微信公众号开发踩坑全记录

    本篇文章主要介绍了详解Vue微信公众号开发踩坑全记录,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • nextTick能否获取到最新dom原理解析

    nextTick能否获取到最新dom原理解析

    这篇文章主要为大家介绍了nextTick能否获取到最新dom原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-11-11
  • 详解vue结合el-table实现表格小计总计需求(summary-method)

    详解vue结合el-table实现表格小计总计需求(summary-method)

    这篇文章主要介绍了vue结合el-table实现表格小计总计需求(summary-method),本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2024-01-01
  • 前端VUE双语实现方案详细教程

    前端VUE双语实现方案详细教程

    在项目需求中我们会遇到国际化的中英文切换,这篇文章主要给大家介绍了关于前端VUE双语实现方案的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-08-08
  • Vue的路由配置过程(Vue2和Vue3的路由配置)

    Vue的路由配置过程(Vue2和Vue3的路由配置)

    这篇文章回顾了Vue2和Vue3中路由的配置步骤,包括安装正确的路由版本、创建路由实例、配置routes以及在入口文件中注册路由,Vue2中使用Vue.use(VueRouter),而Vue3中使用createRouter和createWebHashHistory
    2025-01-01
  • vant自定义引入iconfont图标及字体的方法步骤

    vant自定义引入iconfont图标及字体的方法步骤

    因为vantUI给的图标非常少,为了满足自己的需求,就应该找到一种方法来向vant添加自己自定义的图标,对于自定义图标我第一时间想到的就是阿里的iconfont矢量图库,这篇文章主要给大家介绍了关于vant自定义引入iconfont图标及字体的方法步骤,需要的朋友可以参考下
    2023-09-09
  • vue实现可移动的悬浮按钮

    vue实现可移动的悬浮按钮

    这篇文章主要为大家详细介绍了vue实现可移动的悬浮按钮,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-03-03
  • Vue实现两个列表之间的数据联动的代码示例

    Vue实现两个列表之间的数据联动的代码示例

    在Vue.js应用开发中,列表数据的联动是一个常见的需求,这种联动可以用于多种场景,例如过滤筛选、关联选择等,本文将详细介绍如何在Vue项目中实现两个列表之间的数据联动,并通过多个具体的代码示例来帮助读者理解其实现过程,需要的朋友可以参考下
    2024-10-10
  • Vue导出Excel文件的四种实现方式

    Vue导出Excel文件的四种实现方式

    文章介绍了四种在Vue.js中导出Excel文件的方法,包括前端使用xlsx库、exceljs,使用现成组件vue-json-excel,以及后端生成,每种方法都有其适用场景和优缺点,推荐根据具体需求选择合适的方法,需要的朋友可以参考下
    2025-12-12
  • 详解vue页面状态持久化详解

    详解vue页面状态持久化详解

    这篇文章主要为大家介绍了vue页面状态持久化,具有一定的参考价值,感兴趣的小伙伴们可以参考一下,希望能够给你带来帮助
    2021-12-12

最新评论