問題描述：

子應(yīng)用使用的是vue+elementUI，在項(xiàng)目main.js中需要引入elementUI的樣式文件。elementUI的樣式文件中有字體文件的引用，是以相對(duì)路徑的形式寫在css文件中的，

本來獨(dú)立部署項(xiàng)目訪問是沒問題的，問題出現(xiàn)在以qiankun微服務(wù)的方式嵌入到主應(yīng)用中時(shí)，路徑就不能在以相對(duì)路徑來顯示了，否則就會(huì)顯示404。

問題分析：

首先vue項(xiàng)目在webpack打包時(shí)會(huì)使用extract-text-webpack-plugin這個(gè)插件來抽離js文件中的css作為一個(gè)單獨(dú)的css文件，qiankun對(duì)于子應(yīng)用css的文件處理是將css文件的內(nèi)容以style的方式插入到dom中。

獨(dú)立訪問子應(yīng)用時(shí)，訪問的是css文件

?以微應(yīng)用方式嵌入時(shí)，會(huì)將css文件的內(nèi)容直接嵌入到style標(biāo)簽

這個(gè)時(shí)候的字體文件引用是相對(duì)路徑

?比如我的子應(yīng)用部署在a.com/bbb，主應(yīng)用部署在a.com/aaa，獨(dú)立訪問子應(yīng)用時(shí)，字體文件的路徑就是a.com/bbb/static/fonts/XXX.wofff（能找到資源），嵌入主應(yīng)用后訪問的路徑就是a.com/aaa/static/fonts/XXX.woff（找不到資源），這個(gè)時(shí)候就會(huì)報(bào)404錯(cuò)誤。

qiankun官方文檔上有提到可以設(shè)置運(yùn)行時(shí)publicPath來解決靜態(tài)資源的404問題，但是對(duì)于css文件內(nèi)的路徑是不行的。

解決方案

1.在子應(yīng)用打包時(shí)，提取css文件的時(shí)候，將publicPath路徑寫為絕對(duì)路徑。缺點(diǎn)是部署到不同環(huán)境時(shí)要手動(dòng)去修改。

2.在子應(yīng)用打包的時(shí)候，不在提取css到獨(dú)立的文件中。缺點(diǎn)是會(huì)導(dǎo)致js文件變大

?因?yàn)樵诖虬鼤r(shí)，對(duì)于字體文件是通過url-loader進(jìn)行解析的，對(duì)于超過設(shè)置規(guī)定大小的文件，默認(rèn)會(huì)改為通過file-loader進(jìn)行解析，file-loader的設(shè)置項(xiàng)中publicPath有__webpack_public_path__這個(gè)默認(rèn)值，配合使用webpack運(yùn)行時(shí)publicPath設(shè)置即可。

file-loader的publicPath屬性說明：?

?使用qiankun官方的解決辦法

更進(jìn)一步，如果不提取css到獨(dú)立文件，那么css都會(huì)被打包到j(luò)s文件中，會(huì)導(dǎo)致文件變大。我們只是需要解決elementUI的字體文件引用問題，其實(shí)只涉及到elementUI的css文件，即我們只是不希望elementUI的這部分css被提取出去。

extract-text-webpack-plugin插件提供了一個(gè)allChunk設(shè)置：

allChunks：當(dāng)為false的時(shí)候，只會(huì)提取初始化的時(shí)候引入的css,當(dāng)allChunks屬性為true時(shí)，會(huì)把異步引入的css也提取出來。

所以我們可以將allChunks設(shè)置為false，再將css以異步的方式引入就可以達(dá)到我們需要的效果。

異步引入css文件，只需將main.js中的css引入放到App.vue中，再將App.vue改為異步加載即可。