vite项目打包资源分配目录

vite项目打包资源分配目录

vite项目打包后所有资源都放在了assets文件夹中，像传统工程一样分为不同的文件夹，js放js文件夹，css放css文件夹，图片放img文件夹
vite无论是当做是脚手架还是构建工具，内部实现原理就是Rollup和esbuild
Rollup会深度影响打包结果，如何在vite里面配置Rollup，Rollup相关配置 

• vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'


export default defineConfig({
  plugins: [
    vue(),
  ],
  build: {
    rollupOptions:{
      output: {
        entryFileNames: 'js/[name].js',//入口文件
        // entryFileNames: 'js/[name]-[hash].js',//入口文件
        chunkFileNames: 'js/[name].js',//分包引入文件
        // chunkFileNames: 'js/[name]-[hash].js',//分包引入文件
        // assetFileNames: '[ext]/[name]-[hash].[ext]',//静态文件
        assetFileNames(assetInfo){
          console.log(assetInfo)
          //文件名称
          if (assetInfo.name.endsWith('.css')) {
            return 'css/[name].css'
            // return 'css/[name]-[hash].css'
          }
          //图片名称
          //定义图片后缀
          const imgExts = ['.png', '.jpg', '.jpeg', '.webp', '.gif', '.svg','.ico']
          if(imgExts.some(ext => assetInfo.name.endsWith(ext))){
            return 'imgs/[name].[ext]'
            // return 'imgs/[name]-[hash].[ext]'
          }
          //剩余资源文件
          return 'assets/[name].[ext]'
          // return 'assets/[name]-[hash].[ext]'
        }
      },
    },
  },
 
});