快捷導(dǎo)航

vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法

更新時(shí)間：2024年09月25日 11:15:39 作者：vivk2017

Vite在默認(rèn)配置下會(huì)將資源打包至assets文件夾并添加哈希值,不同于Webpack的多文件夾存放方式,Vite只對(duì)public文件夾不進(jìn)行打包處理,而Webpack不打包public和static文件夾,本文介紹vite分目錄打包及去掉默認(rèn)的.gz?文件的操作方法,感興趣的朋友一起看看吧

1.vite打包情況介紹：

1.1vite在不進(jìn)行任何配置的情況下，會(huì)將除開(kāi)public的所有引用到資源打包編譯添加哈希值至assets文件夾中（非引用文件以及行內(nèi)樣式圖片未被打包編譯資源會(huì)被treeSharp直接忽略不打包），

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

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

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

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

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等資源文件可通過(guò)media/[name].[hash][ext]命名規(guī)則獲取資源
　2.2.1css文件不可使用上述規(guī)則，必須使用assets默認(rèn)的命名規(guī)則，assets/[name]-[hash].[ext]，否則無(wú)法獲取該文件