脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vite打包拆分js和css

vite打包拆分js和css的配置指南

 更新时间：2023年09月17日 09:00:44   作者：还有多远.  
这篇文章主要给大家介绍了关于vite打包拆分js和css的配置指南,Vite是一个非常快速的工具,它可以帮助你打包JavaScript文件,需要的朋友可以参考下

最近开发了一个h5的系统，用的是vite + vue3 + ts 开发的，

打包之后发现vite会将所有的js和css文件都打在一个文件夹下，assets目录，

所以 我总结了一份拆分js和css的配置，将js和css分别打在不同目录下

配置如下：

build: {
    chunkSizeWarningLimit: 1500,
    rollupOptions: {
      output: {
        // 最小化拆分包
        manualChunks(id) {
          if (id.includes("node_modules")) {
            return id.toString().split("node_modules/")[1].split("/")[0].toString()
          }
        },
        // 用于从入口点创建的块的打包输出格式[name]表示文件名,[hash]表示该文件内容hash值
        entryFileNames: 'js/[name].[hash].js',
        // 用于命名代码拆分时创建的共享块的输出命名
        // 　　chunkFileNames: 'js/[name].[hash].js',
        // 用于输出静态资源的命名，[ext]表示文件扩展名
        assetFileNames: '[ext]/[name].[hash].[ext]',
        // 拆分js到模块文件夹
        chunkFileNames: (chunkInfo) => {
          const facadeModuleId = chunkInfo.facadeModuleId ? chunkInfo.facadeModuleId.split('/') : [];
          const fileName = facadeModuleId[facadeModuleId.length - 2] || '[name]';
          return `js/${fileName}/[name].[hash].js`;
        },
      }
    }
  }

在vite.config.js文件里添加build属性就好了，

打完之后就是这个样子

亲测可用！！！

总结

到此这篇关于vite打包拆分js和css的文章就介绍到这了,更多相关vite打包拆分js和css内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    Vue 动态路由的实现及 Springsecurity 按钮级别的权限控制

    这篇文章主要介绍了Vue 动态路由的实现以及 Springsecurity 按钮级别的权限控制的相关知识，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-09-09
  • Electron+vue3项目使用SQLite3数据库详细步骤(超详细)

    Electron+vue3项目使用SQLite3数据库详细步骤(超详细)

    Electron是一个基于vue.js的新框架,它可以构建桌面应用,这篇文章主要给大家介绍了关于Electron+vue3项目使用SQLite3数据库的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • VueX学习之modules和namespacedVueX详细教程

    VueX学习之modules和namespacedVueX详细教程

    这篇文章主要为大家介绍了VueX学习之modules和namespacedVueX详细教程，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
    2023-06-06
  • Vue中如何运用TS语法

    Vue中如何运用TS语法

    本文主要介绍了Vue中如何运用TS语法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2023-02-02
  • 使用vue如何构建一个自动建站项目

    使用vue如何构建一个自动建站项目

    这篇文章主要介绍了使用vue如何构建一个自动建站项目，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-02-02
  • 详解vue 自定义组件使用v-model 及探究其中原理

    详解vue 自定义组件使用v-model 及探究其中原理

    这篇文章主要介绍了详解vue 自定义组件使用v-model 及探究其中原理，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2019-10-10
  • vue项目中监听手机物理返回键的实现

    vue项目中监听手机物理返回键的实现

    这篇文章主要介绍了vue项目中监听手机物理返回键的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • vue3使用jsx语法详解

    vue3使用jsx语法详解

    在绝大多数情况下,Vue 推荐使用模板语法来创建应用,然而在某些使用场景下,我们真的需要用到 JavaScript 完全的编程能力,这时JSX或渲染函数就派上用场了,下面就来介绍一下如何使用
    2026-02-02
  • vue 中的 render 函数作用详解

    vue 中的 render 函数作用详解

    这篇文章主要介绍了vue 中的 render 函数作用，通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
    2020-02-02
  • vue组件之全局注册和局部注册方式

    vue组件之全局注册和局部注册方式

    这篇文章主要介绍了vue组件之全局注册和局部注册方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03

最新评论