vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue3+ts vite打包结构控制通过rollup进行配置

vue3+ts vite打包结构控制通过rollup进行配置方式

作者:沉迷...

这篇文章主要介绍了vue3+ts vite打包结构控制通过rollup进行配置方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

vue3+ts vite打包结构控制通过rollup进行配置

默认配置的打包结构

在vite.config.ts中进行rollup的配置

使用output.entryFileNames 配置入口文件的打包输出

官方文档https://www.rollupjs.com/configuration-options/#output-chunkfilenames

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(),
})
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]' // 其他文件输出配置
          }
        }
      }
    }
  }
}

总结

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

您可能感兴趣的文章:
阅读全文