快捷導航

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文件夾中（非引用文件以及行內(nèi)樣式圖片未被打包編譯資源會被treeSharp直接忽略不打包），

1.2webpack與vite打包區(qū)別：
1.2.1vite會將所有JS、CSS等文件都統(tǒng)一存放在assets中，不同于webpack會將會自動生成js、css、img文件夾進行分開存放。

1.2.2vite只會對public文件夾進行不打包處理，public文件夾內(nèi)所有文件會移至dist中，webpack會將public和static文件進行不打包處理，存放至dist中

2.需求：vite根據(jù)不同的資源打包時分開文件夾存放

2.1在vite.config.js中配置vite打包參數(shù)（不對public文件夾資源進行任何操作）

build: {
      outDir: 'dist',
      // assetsDir: 'public', // 靜態(tài)資源目錄
      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]`;  // 創(chuàng)建media文件夾存放匹配的資源文件,name為該文件的原名，hash為哈希值，ext為文件后綴名，以[name].[hash][ext]命名規(guī)則
            }
            return `public/css/[name]-[hash].[ext]`; // 不匹配的資源文件存放至assets，以[name]-[hash].[ext]命名規(guī)則，注意兩處的命名規(guī)則不同
          },
        }
      }
    },`在這里插入代碼片`

export default {
  // ...其他配置
  build: {
    rollupOptions: {
      output: {
        assetFileNames: (assetInfo) => {
          if (/\.(mp4|webm|ogg|mp3|wav|flac|aac)$/.test(assetInfo.name)) { // 匹配資源文件后綴
            return `media/[name].[hash][ext]`;  // 創(chuàng)建media文件夾存放匹配的資源文件,name為該文件的原名，hash為哈希值，ext為文件后綴名，以[name].[hash][ext]命名規(guī)則
          }
          return `assets/[name]-[hash].[ext]`; // 不匹配的資源文件存放至assets，以[name]-[hash].[ext]命名規(guī)則，注意兩處的命名規(guī)則不同
        },
      },
    },
  },
  // ...其他配置
};

　2.2 打包后資源生成命名規(guī)則不同的區(qū)別：
2.2.1圖片、JS等資源文件可通過media/[name].[hash][ext]命名規(guī)則獲取資源
　2.2.1css文件不可使用上述規(guī)則，必須使用assets默認的命名規(guī)則，assets/[name]-[hash].[ext]，否則無法獲取該文件