運(yùn)行jeecgboot-vue3項(xiàng)目可能出現(xiàn)的問題

1. 執(zhí)行pnpm install的時(shí)候報(bào)錯(cuò)

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

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

• 刪除無法解析的"//",

• pnpm降級(jí)到6.23.6（沒試，不想降級(jí)）

這是pnpm在讀package.json中的配置時(shí)出現(xiàn)的問題,pnpm.overrides或者resolutions存在"//"，選擇刪掉，因?yàn)橐蕾囋催x擇好了，在國(guó)內(nèi)應(yīng)該都有鏡像

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

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好處：

1. 全局安裝，公用依賴，同名包同版本只會(huì)下載一次，提升速度

2. 項(xiàng)目中只會(huì)展示一級(jí)依賴，不會(huì)引入你不知道的子級(jí)依賴（npm將依賴拍平以減少重復(fù)包的下載）

4. 關(guān)于npm下載依賴esbuild報(bào)錯(cuò)的問題throw new Error(`esbuild: Failed to install correctly

網(wǎng)上有很多文章解決esbuild安裝問題，就是執(zhí)行node node_modules/esbuild/install.js安裝后，再跑就可以了。

這里我提一點(diǎn)，不要無腦復(fù)制粘貼，要看你的esbuild的報(bào)錯(cuò)路徑

以下的報(bào)錯(cuò)路徑就是另外一個(gè)依賴?yán)锩娴膱?bào)錯(cuò)

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


根據(jù)目錄找到文件夾，確實(shí)里面里面也有一個(gè)esbuild 所以執(zhí)行以下

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


再次運(yùn)行就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".

1. 在vite.config.js中有打包配置terserOptions為了去掉console，從提示可以看出來，現(xiàn)在Vite默認(rèn)使用esbuild去作為代碼壓縮器，如果想要使用terserOptions這些配置，要增加minify：terser。 看文檔默認(rèn)esbuild壓縮有優(yōu)勢(shì)，那也可以刪掉terserOptions

1. minify: 編譯優(yōu)化手段，指在不影響代碼語義的情況下，盡可能的減小程序的體積，常見的minify工具如terser、uglify，swc和esbuid也自帶minify功能。

2. 發(fā)現(xiàn)并不生效，后來查詢是minify配置esbuild的問題，配置成terser混淆器就可以了 ，?網(wǎng)上對(duì)于minify的默認(rèn)值有不一致的說法，官網(wǎng)的默認(rèn)值是esbuild，而經(jīng)過實(shí)際驗(yàn)證，它的默認(rèn)值應(yīng)該是terser

3. 相關(guān)參數(shù)： 1. compress：（默認(rèn){}）-通過false以完全跳過壓縮。傳遞一個(gè)對(duì)象以指定自定義壓縮選項(xiàng)。 2. compress.keep_infinity：（默認(rèn)值：false）-通過true以防止Infinity被壓縮為1/0，這可能會(huì)導(dǎo)致Chrome出現(xiàn)性能問題。 3. compress.drop_console：（默認(rèn)值：false）-傳遞true以放棄對(duì)console.*函數(shù)的調(diào)用 。如果您希望在刪除函數(shù)調(diào)用后刪除特定的函數(shù)調(diào)用，例如console.info和/或保留函數(shù)自變量的副作用，請(qǐng)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',
??????//?進(jìn)行壓縮計(jì)算
??????brotliSize:?false,
??????target:?'es2015',
??????//?【VUEN-872】css編譯兼容低版本chrome內(nèi)核（例如360瀏覽器）
??????cssTarget:?'chrome80',
??????outDir:?OUTPUT_DIR,
??????terserOptions:?{
????????compress:?{
??????????keep_infinity:?true,
??????????//?Used?to?delete?console?in?production?environment
??????????//?打包自動(dòng)刪除console
??????????drop_console:?VITE_DROP_CONSOLE,
??????????drop_debugger:?true,
????????},
??????},
??????//?Turning?off?brotliSize?display?can?slightly?reduce?packaging?time
??????chunkSizeWarningLimit:?2000,
????},


6. vite.config.js中有一個(gè)配置optimizeDeps

該配置的目的：

1. 兼容 CommonJS 和 AMD 模塊的依賴（下圖中needsInterop標(biāo)志為true就是要重寫CommonJS的導(dǎo)出） 因?yàn)?Vite 的 DevServer 是基于瀏覽器的 Natvie ES Module 實(shí)現(xiàn)的，所以對(duì)于使用的依賴如果是 CommonJS 或 AMD 的模塊，則需要進(jìn)行模塊類型的轉(zhuǎn)化（ES Module）

2. 減少模塊間依賴引用導(dǎo)致過多的請(qǐng)求次數(shù),加快啟動(dòng)速度 預(yù)編譯后會(huì)將dependencies的依賴和optimizeDeps.include中的依賴進(jìn)行預(yù)編譯緩存，并生成存儲(chǔ)的路徑文件node_moduels/.vite/_metadata.json

為了加快二次及后續(xù)編譯速度，自己寫optimizeDeps比較麻煩，這里到npm上看看用起來吧：vite-plugin-optimize-persist?吧

老實(shí)講：vite項(xiàng)目頁面稍微多一丟丟東西，開發(fā)體驗(yàn)時(shí)首次加載頁面真的慢。不過有了第一次，后面還是舒服

7. vite（esbuild + rollup）

關(guān)于esbuild的優(yōu)秀，網(wǎng)上有很多構(gòu)建優(yōu)勢(shì)對(duì)比圖，甩webpack一條街。

Vite 用 esbuild 替代 Rollup 進(jìn)行預(yù)打包，速度也非?？?，上面的第三點(diǎn)可以看到生產(chǎn)可以用 esbuild 作為壓縮器。生產(chǎn)打包還是用的Rollup， esbuild 目前對(duì)生產(chǎn)包支持不夠健壯，很多配置無法通過 esbuild 實(shí)現(xiàn)

8. 運(yùn)行警告提示W(wǎng)ARN [@vue/compiler-sfc] ::v-deep usage as a combinator has been deprecated. Use :deep() instead.

Vue 警告代碼

::v-deep?usage?as?a?combinator?has?been?deprecated.?Use?:deep(<inner-selector>)?instead.


解決方案

使用 :deep() 替換 ::v-deep

.carousel?{
??//?Vue?2.0?寫法
??//?::v-deep?.carousel-btn.prev?{
??//????left:?270px;
??//??}

??//?Vue?3.0?更改為以下寫法
??:deep(.carousel-btn.prev)?{
????left:?270px;
??}
}