electron打包中的坑如何解決

這篇文章主要講解了“electron打包中的坑如何解決”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“electron打包中的坑如何解決”吧！

問(wèn)題一：css文件中圖片加載失敗

問(wèn)題描述

問(wèn)題是這樣的，electron打包為桌面端以后，登錄頁(yè)的表單是正常顯示的，但是整個(gè)頁(yè)面的背景圖沒(méi)了。我百度了一下，發(fā)現(xiàn)大多是說(shuō)白屏啥的，但是我不是白屏啊，我的表單能正常顯示，為此，我在生產(chǎn)環(huán)境打開(kāi)了調(diào)試工具：

 createProtocol('app')
 // Load the index.html when not in development
 win.loadURL('app://./index.html')
 win.webContents.openDevTools()

發(fā)現(xiàn)原來(lái)是我的css文件中的圖片路徑錯(cuò)了：

到底錯(cuò)在哪兒？隨意看看一份正常加載的js文件就知道了：

原來(lái)是app://./ 開(kāi)頭而不是 app://,真的是大冤種轉(zhuǎn)世了！ 我發(fā)現(xiàn)此問(wèn)題只存在于css文件中的background:url()這樣的代碼里，項(xiàng)目使用的是vue-cli腳手架，也就是使用的webpack，我在這已經(jīng)知道大致是某些loader和plugin處理時(shí)造成的bug了。

解決過(guò)程

竟然知道了是loader和plugin的鍋，剛開(kāi)始我嘗試自已寫一個(gè)loader，只要通過(guò)一行正則表達(dá)式大概就能解決問(wèn)題了：

  const res= content.replace(/app:\/\/\//,"app://./");
  //app-loader
  module.exports = function (content) {
    return content.replace(/app:\/\/\//, "app://./");
}

但我失敗了。 原因在于我匹配了css文件，但是vue-cli腳手架已經(jīng)為css文件的處理內(nèi)置了許多的loader,我們可以通過(guò) vue inspect查看實(shí)際的webpack配置來(lái)觀察loader情況

vue inspect --mode production >> webpack.test.js

其依次使用了postcss-loader、css-loader和extract-css-loader,那么，我們將自定義的app-loader放在extract-css-loader之前不就好了（注意webpack中的loader執(zhí)行順序從右到左）， 通過(guò)chainWebpack這項(xiàng)vue-cli提供的鏈?zhǔn)脚渲茫▽?shí)際封裝了webapck-chain這個(gè)插件）來(lái)將我們的loader加入。

 if (IS_PROD) {
            config.resolveLoader.modules.add("./src/loaders");
            config.module.rule('css').oneOf('vue-modules').use('app-loader').before('extract-css-loader').loader('app-loader')
        }

然而經(jīng)過(guò)打包后我又失敗了，依然是app:/// 這樣的路徑。

到底為什么？

原因在于extract-css-loader是由mini-extract-css-plugin提供的，而熟悉它的小伙伴們都知道，這兩個(gè)是配套使用的，因此，當(dāng)我嘗試在我的loader中輸出文件內(nèi)容時(shí)，我將得到如下信息：

我不得不懷疑實(shí)際修改代碼，劃分chunks的操作是在該plugin中完成的，看來(lái)還是寫一個(gè)plugin來(lái)處理吧！ 但當(dāng)前我來(lái)不及閱讀mini-extract-css-plugin的源碼了，我只能想到在插件的hooks中找到一個(gè)合適的時(shí)機(jī)去處理已經(jīng)被處理轉(zhuǎn)換的代碼，最終我選擇了emit這個(gè)hook。 處理代碼如下：

 compiler.hooks.emit.tap('AppPlugin', (compilation) => {
            compilation.assetsInfo.forEach((assetsItem, key) => {
                if (/\.css$/.test(key) && !/^static\/lib\//.test(key)) {
                    compilation.assets[key]._value = compilation.assets[key]._value.replace(/app:\/\/\//g, "app://./")
                }
            })
        })

這段代碼解釋起來(lái)就是compilation中的assets存放著所有的之前處理后的代碼，由于使用了emit 這個(gè)hook，也就是即將被webpack輸出的代碼，通過(guò)遍歷assetsInfo(相當(dāng)于assets這個(gè)對(duì)象里的代碼清單，key是即將輸出的相對(duì)路徑),只要判斷其所有的css文件，將 _value 也就是要處理代碼使用正則替換就可以了（為什么知道是它？調(diào)試時(shí)不斷打印發(fā)現(xiàn)的）。

經(jīng)過(guò)驗(yàn)證，該方法可行。

補(bǔ)充

此部分需要有一定的webpack基礎(chǔ)，我也是不停查閱官方文檔和不停百度了解了一些屬性和配置，如何手寫loader和plugin的帖子很多，我就不做搬運(yùn)了。

問(wèn)題二：無(wú)法使用cookie

問(wèn)題描述

當(dāng)我登錄頁(yè)面登錄后發(fā)現(xiàn)登錄失敗，任由我怎么登錄都是停留在登錄頁(yè)面。

原因分析

這個(gè)問(wèn)題還是比較容易解釋的，畢竟我用了app://這樣的協(xié)議，不是web端上的http:// 這樣的，cookie就掛了。然后嘛，我的路由守衛(wèi)由于無(wú)法訪問(wèn)cookie獲取到token就一直停留在登錄頁(yè)面。 正確的做法就是改用sessionStorage或者localStorage來(lái)存儲(chǔ)token。

感謝各位的閱讀，以上就是“electron打包中的坑如何解決”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)electron打包中的坑如何解決這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！