1. 程式人生 > 其它 >Vite版本從2.6.x升級到2.7.x之後,Vant從3.3.0升級到3.3.(1-n)之後,專案構建時報錯

Vite版本從2.6.x升級到2.7.x之後,Vant從3.3.0升級到3.3.(1-n)之後,專案構建時報錯

Vite和Vant版本差異引起的構建失敗(報錯)

某次升級一下專案中的部分依賴:

Vite 從 2.6.x 升級到了 2.7.x

Vant 從 3.3.0 升級到了 3.3.7

(注:Vant3.3.0與Vite2.7.x一塊使用並build時是可以成功的,但Vant的版本在向上動一點就會報錯)

報錯資訊

[vite]: Rollup failed to resolve import "/home/homework/node_modules/vant/lib/vant/es/config-provider/style" from "src/helper/vant.ts".

比較奇怪的是,雖然構建時會failed,但對dev環境並沒有可見的影響。。。

一開始沒有發現是什麼原因導致的,後面一次檢查中,發現最新的Vite在配置第三方UI元件樣式按需載入的方式細節有調整。

原有(build failed)

import styleImport from 'vite-plugin-style-import';

//// codes ...
vueJSX(),
styleImport({
  libs: [
    {
      libraryName: 'vant',
      esModule: true,
      resolveStyle: (name) => `vant/es/${name}/style`,
    },
  ],
}),
//// codes ...

新版(success)

import styleImport, { VantResolve } from '
vite-plugin-style-import'; //// codes... vueJSX(), styleImport({ resolves: [VantResolve()], libs: [ { libraryName: 'vant', esModule: true, resolveStyle: component => `/node_modules/vant/es/${component}/style/index`, }, ], }), //// codes...

按照“新版”的方式去配置vite.config,就可以解決Vant3.3.1及以上版本(Vite2.7.x)build專案程式碼失敗的問題了