vue3 vite配置問題錦囊（TS）

目錄：

一、vite 配置圖片壓縮打包【配置】

二、warning: “@charset“ must be the first rule in the file【警告問題】

三 ts找不到@模塊【報錯問題】

四、vite打包分類文件輸出配置以及靜態資源拆分【配置】

 五、打包刪除console配置 以及報錯  build.terserOptions is specified but build.minify is not set to use Terser. Note Vite now defaults to use esbuild for minification. If you still prefer Terser, set build.minify to "terser".解決【配置】

 

正文

一、vite 配置圖片壓縮打包【配置】

安裝
cnpm i vite-plugin-imagemin -D

結果   

vite.config文件配置

 添加配置到plugins里面

import viteImagemin from 'vite-plugin-imagemin' // 引入

export default defineConfig({
  plugins: [vue(),
  viteImagemin({
    gifsicle: {
      optimizationLevel: 7,
      interlaced: false,
    },
    optipng: {
      optimizationLevel: 7,
    },
    mozjpeg: {
      quality: 20,
    },
    pngquant: {
      quality: [0.8, 0.9],
      speed: 4,
    },
    svgo: {
      plugins: [
        {
          name: 'removeViewBox',
        },
        {
          name: 'removeEmptyAttrs',
          active: false,
        },
      ],
    },
  })]
}）

插件官網https://github.com/vbenjs/vite-plugin-imagemin

效果  

 

 圖片變小了63%

 

二、warning: “@charset“ must be the first rule in the file【警告問題】

      

 

 

 原因：css編譯，@charset 規則放在第一位，    具體的原因與font-family有關

解決方式

    

 

 如果無效可參考https://www.zhihu.com/question/498190531

我本地測試有效😀

 

三 ts找不到@模塊【報錯問題】

 

 在vue文件中@使用正常

納悶

兩種解決方式

1 、不用@ ，用相對路徑

顯然這種處理優點裝鴕鳥了

2、配置tsconfig.json

(你都用@了別告訴我沒在vite配置，這里不說@配置）

compilerOptions里添加

　　"baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }

不報錯了

 

四、vite打包分類文件輸出配置以及靜態資源拆分【配置】

直接打包后所有累心文件都存在一個文件內

     

 

 

 1.文件分類輸出，干凈整潔舒心

 

配置一下config.ts文件分類輸出

 build: {
    outDir: 'dist',
    chunkSizeWarningLimit: 1000, // chunks 大小限制
    rollupOptions: {
      output: {
    chunkFileNames: 'js/[name]-[hash].js', // 分類輸出 entryFileNames: 'js/[name]-[hash].js', assetFileNames: '[ext]/[name]-[hash].[ext]', 
        manualChunks(id) { if (id.includes('node_modules')) { // 超大靜態資源拆分 return id.toString().split('node_modules/')[1].split('/')[0].toString() } }
      }
    }
  }

效果

     

！注意很多文案配置是

  

 

這樣配置目前發現的bug：

bug1： assetFileNames配置的圖片打包會報錯，測試發現與配置的imagemin圖片壓縮插件路徑讀取是有沖突的

bug2：項目測試中發現js放到static里面會與iframe嵌入頁面讀取靜態文件讀取沖突導致加載頁面404

bug3：build打包文件生成的dist自動刪除文件不干凈，static太深層級導致需要手動刪除再build或者build2次才成功

 

 

2. 超靜態資源過大，默認500kb會預警

 

 配置

  chunkSizeWarningLimit: 1000, // chunks 大小限制

  不能一味放大限制。我們可以利用 manualChunks 拆分超大資源

 // 續上1分類配置

測試發現bug，css設置背景圖片后找不到，圖片路徑指向css中了

配置了絕對路徑也一樣

於是只要注釋調其他文件分類的輸出，只保留js

    

 

    

 

 路過的大佬們有更好的解決方式的 推薦學習一下🤩

 

 五、打包刪除console配置 以及報錯  build.terserOptions is specified but build.minify is not set to use Terser. Note Vite now defaults to use esbuild for minification. If you still prefer Terser, set build.minify to "terser".解決【配置】

 

功能說明：打包后刪除文件中console、debugger等調試用的多余代碼

 看了很多配置如下

 build: {
    // 清除console等多余代碼
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    },
}

結果報錯

 

 原來是build配置項minify沒有配置，默認是esbuild，需要配置為terser

添加minify配置

 

 解決了😜😄😀

包小了

 

 對比之前打包大小參考https://www.cnblogs.com/yflbk-2016/p/16276138.html

=====后續

查閱資料發現esbuild打包速度是terser20+倍，壓縮率接近，查閱官網資料不是很全，讀英文太痛苦。等待成熟后續關注🙃😭