electron打包中的巨坑解決記錄

更新時間：2023年03月01日 11:50:11 作者：zerotower

這篇文章主要為大家介紹了electron打包中的巨坑解決記錄，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

吐槽

從上周五到今天，我被electron打包折磨得死去活來，本來想讓測試用桌面端的，現在不得不改用web端，真的好無語。今天解決問題順利打包后來記錄一下這個問題。

問題一：css文件中圖片加載失敗

問題描述

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

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

發(fā)現原來是我的css文件中的圖片路徑錯了：

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

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

解決過程

竟然知道了是loader和plugin的鍋，剛開始我嘗試自已寫一個loader，只要通過一行正則表達式大概就能解決問題了：

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

但我失敗了。原因在于我匹配了css文件，但是vue-cli腳手架已經為css文件的處理內置了許多的loader,我們可以通過 vue inspect查看實際的webpack配置來觀察loader情況

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

其依次使用了postcss-loader、css-loader和extract-css-loader,那么，我們將自定義的app-loader放在extract-css-loader之前不就好了（注意webpack中的loader執(zhí)行順序從右到左），通過chainWebpack這項vue-cli提供的鏈式配置（實際封裝了webapck-chain這個插件）來將我們的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')
        }

然而經過打包后我又失敗了，依然是app:/// 這樣的路徑。

到底為什么？

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

我不得不懷疑實際修改代碼，劃分chunks的操作是在該plugin中完成的，看來還是寫一個plugin來處理吧！但當前我來不及閱讀mini-extract-css-plugin的源碼了，我只能想到在插件的hooks中找到一個合適的時機去處理已經被處理轉換的代碼，最終我選擇了emit這個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://./")
                }
            })
        })

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

經過驗證，該方法可行。

補充

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

問題二：無法使用cookie

問題描述

當我登錄頁面登錄后發(fā)現登錄失敗，任由我怎么登錄都是停留在登錄頁面。

原因分析

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