vite 自定义打包输出至指定文件夹-526互联

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打包参数

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]命名规则，注意两处的命名规则不同
        },
      },
    },
  },

  // ...其他配置
};