開發(fā)版本

"vue": "^3.2.45",
"qiankun": "^2.8.4"

圖片加載報錯

現(xiàn)象描述

主服務(wù)加載子服務(wù)的時候，子服務(wù)的圖片有些可以正常展示，有些無法正常展示

分析

使用瀏覽器的開發(fā)者工具，發(fā)現(xiàn)可以展示的圖片是打包后使用base64的格式展示的，不能展示的圖片是因為打包后使用的相對路徑去展示圖片

在微服務(wù)中，不能展示的圖片相對路徑是：…/…/assets/img/empty.2bf9e4f5.png

如果該微服務(wù)單獨打開子服務(wù)頁面，則獲取圖片路徑是子域名，加載正確，但是當主服務(wù)加載子服務(wù)的過程，導致相對路徑的域名變成了主服務(wù)，主服務(wù)是不存在該hash圖片了，導致了圖片的加載404問題

解決方案

根據(jù)分析可以發(fā)現(xiàn)解決方案很明顯：

1. 使相對路徑的圖片變成base64的展示格式
2. 上傳到CDN位置，使用訪問靜態(tài)資源的方式，也即http的方式訪問圖片
3. 取消Hash的命名方式，并使得主應用中也包含該圖片，例如…/…/assets/img/empty.png

base64的展示格式

為什么有些是base64的格式,有些不是，經(jīng)過查詢之后發(fā)現(xiàn)10kb以下的圖片會自動轉(zhuǎn)化為base64的格式，但是以上的不會

在實踐過程中發(fā)現(xiàn)并不是10kb以下的都會變成base64的格式，實測中4.96k的png格式圖片轉(zhuǎn)化失敗，3.37kb的成功了

所以最簡單的方式是對圖片進行壓縮，但是壓縮圖片這種方式非常有限制性，因為如果圖片非常大，壓縮到10kb以下可能很不現(xiàn)實，并且可能導致的圖片的失幀

靜態(tài)資源的展示方式

將所有的圖片都上傳至靜態(tài)資源管理服務(wù)器，通過訪問該服務(wù)器，訪問靜態(tài)資源，目前沒有專門存放靜態(tài)資源的服務(wù)器，所以該方式可以之后嘗試

并且如果靜態(tài)資源服務(wù)器關(guān)閉或撤銷，可能導致圖片的丟失，該方式也不太推薦，因為該方式導致了資源的分離

取消hash的取值方式，并在主應用中添加圖片

該方式的優(yōu)點是不用對自服務(wù)做更多處理，但是缺點也很明顯，每次自服務(wù)中存在大于10kb的圖片，也需要添加到主服務(wù)中，并且要非常注意不能有同名的圖片之類的，總之該方式簡單粗暴，不推薦,取消hash的方式請看images配置部分

設(shè)置圖片的絕對路徑

以下是對打包后圖片的配置說明

const publicPath = process.env.NODE_ENV === 'production' ? 'https://qiankun.umijs.org/' : `http://localhost:${port}`;module.exports = {chainWebpack: (config) => {config.module.rule('images').test(/\.(png|jpe?g|gif|svg)(\?.*)?$/).use('url-loader').loader('url-loader').options({limit: 4096, // 小于4kb將會被打包成 base64fallback: {loader: 'file-loader',options: {name: 'img/[name].[hash:8].[ext]',//圖片命名包含hash// name: 'img/[name].[ext]',//圖片命名包去掉hashpublicPath,},},});},
};

設(shè)置publicPath為上線環(huán)境的值，所以缺點也是打包build的時候需要確定微服務(wù)的域名，該方式并不能根據(jù)環(huán)境動態(tài)設(shè)置該值，該方式也算是方式2的一個具體實現(xiàn)，如果線上環(huán)境比較單一可以使用該方式，但是如果打包后有多個環(huán)境與域名，例如sit/uat/prod，則該方式不合適

根據(jù)環(huán)境動態(tài)設(shè)置圖片的絕對路徑

publicPath的值只能簡單的區(qū)分是開發(fā)環(huán)境還是線上環(huán)境，而無法對線上的環(huán)境進行區(qū)分

const DNS_MAP={sit:"xxx.xx.sit",uat:"xxx.xx.uat",prod:"xxx.xx.prod"
}
const env = window["env"];//系統(tǒng)配置，該值是你可以獲取到的環(huán)境值
const domain=DNS_MAP[env]

<div :style="{background-image:`url(${domain}/img/empty.png)`}"></div>

nginx轉(zhuǎn)發(fā)方式

nginx根據(jù)前綴設(shè)置轉(zhuǎn)發(fā)，其實該方式并不合適，因為基本打包方式導致所有微服務(wù)可能都是/assets/img的前綴，圖片域名變成主服務(wù)域名，主服務(wù)并不清楚當前圖片是轉(zhuǎn)發(fā)給那個子服務(wù)的