vue3 使用bootstrap（網友心得運行jeecgboot-vue3）

2023-10-14 02:41:56

運行jeecgboot-vue3項目可能出現的問題

1. 執行pnpm install的時候報錯

ERR_PNPM_INVALID_OVERRIDE_SELECTOR Cannot parse the "//" selector in the overrides

翻譯：在overrides裡面無法解析"//" 這個問題在issue中能找到，解決辦法如下：

刪除無法解析的"//",pnpm降級到6.23.6（沒試，不想降級）

這是pnpm在讀package.json中的配置時出現的問題,pnpm.overrides或者resolutions存在"//"，選擇刪掉，因為依賴源選擇好了，在國內應該都有鏡像

pnpm.overrides 和 yarn 提供的resolutions 作用類似：指定依賴版本覆蓋所有依賴及子依賴。 (npm可以直接安裝指定版本） resolutions在遇到某些子依賴高版本有bug的時候，固定所有子依賴的版本有用

package.json"resolutions": { "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it", "bin-wrapper": "npm:bin-wrapper-china", "rollup": "^2.56.3", "gifsicle": "5.2.0" },

3.pnpm好處：全局安裝，公用依賴，同名包同版本只會下載一次，提升速度項目中只會展示一級依賴，不會引入你不知道的子級依賴（npm將依賴拍平以減少重複包的下載）4. 關於npm下載依賴esbuild報錯

報錯信息：throw new Error(`esbuild: Failed to install correctly

網上有很多文章解決esbuild安裝問題，就是執行node node_modules/esbuild/install.js安裝後，再跑就可以了。

這裡我提一點，不要無腦複製粘貼，要看你的esbuild的報錯路徑

以下的報錯路徑就是另外一個依賴裡面的報錯

at Object. (/Users/ruios/web/vue-vben-admin-main/node_modules/vite-plugin-mock/node_modules/esbuild/bin/esbuild:2:7)

根據目錄找到文件夾，確實裡面裡面也有一個esbuild 所以執行以下

node node_modules/vite-plugin-mock/node_modules/esbuild/install.js

再次運行就ok了

5. 提示錯報

報錯信息：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.config.js中有打包配置terserOptions為了去掉console，從提示可以看出來，現在Vite默認使用esbuild去作為代碼壓縮器，如果想要使用terserOptions這些配置，要增加minify：terser。看文檔默認esbuild壓縮有優勢，那也可以刪掉terserOptionsminify: 編譯優化手段，指在不影響代碼語義的情況下，儘可能的減小程序的體積，常見的minify工具如terser、uglify，swc和esbuid也自帶minify功能。發現並不生效，後來查詢是minify配置esbuild的問題，配置成terser混淆器就可以了， 網上對於minify的默認值有不一致的說法，官網的默認值是esbuild，而經過實際驗證，它的默認值應該是terser相關參數： 1. compress：（默認{}）-通過false以完全跳過壓縮。傳遞一個對象以指定自定義壓縮選項。 2. compress.keep_infinity：（默認值：false）-通過true以防止Infinity被壓縮為1/0，這可能會導致Chrome出現性能問題。 3. compress.drop_console：（默認值：false）-傳遞true以放棄對console.*函數的調用。如果您希望在刪除函數調用後刪除特定的函數調用，例如console.info和/或保留函數自變量的副作用，請pure_funcs改用。

修改前代碼：

vite.config.js build: { target: 'es2015', outDir: OUTPUT_DIR, terserOptions: { compress: { keep_infinity: true, // Used to delete console in production environment drop_console: VITE_DROP_CONSOLE, }, }, // Turning off brotliSize display can slightly reduce packaging time brotliSize: false, chunkSizeWarningLimit: 2000, },

修改後代碼：

build: { minify: 'terser', // 進行壓縮計算 brotliSize: false, target: 'es2015', // 【VUEN-872】css編譯兼容低版本chrome內核（例如360瀏覽器） cssTarget: 'chrome80', outDir: OUTPUT_DIR, terserOptions: { compress: { keep_infinity: true, // Used to delete console in production environment // 打包自動刪除console drop_console: VITE_DROP_CONSOLE, drop_debugger: true, }, }, // Turning off brotliSize display can slightly reduce packaging time chunkSizeWarningLimit: 2000, },

6. vite.config.js中有一個配置optimizeDeps

該配置的目的：

兼容 CommonJS 和 AMD 模塊的依賴（下圖中needsInterop標誌為true就是要重寫CommonJS的導出）因為 Vite 的 DevServer 是基於瀏覽器的 Natvie ES Module 實現的，所以對於使用的依賴如果是 CommonJS 或 AMD 的模塊，則需要進行模塊類型的轉化（ES Module）減少模塊間依賴引用導致過多的請求次數,加快啟動速度預編譯後會將dependencies的依賴和optimizeDeps.include中的依賴進行預編譯緩存，並生成存儲的路徑文件node_moduels/.vite/_metadata.json