vue-cli3 + electron 打包報(bào)錯(cuò)：Error: Application entry file "background.ts" in the "**\dist_electron\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.
首先，項(xiàng)目使用vue-cli3 + electron + typescript 。運(yùn)行沒問題，打包報(bào)錯(cuò)如上。這是我們對(duì)package.json里面的main理解有誤造成的，安裝好electron后，默認(rèn)的main入口是background.js。本人踩坑的時(shí)候，吧main改成了background.ts，導(dǎo)致該錯(cuò)誤。
剛開始也百度查了一下，踩過坑的同志說要把main改成background.js，還有去掉vue.config.js里面的include文件什么的。可是我誤解了別人的意思，我把main改成background.js的同時(shí)，也把項(xiàng)目的backgound.ts文件改成了background.js，而且我的vue.config.js并沒有任何和electron相關(guān)的配置。結(jié)果不想而知，并沒有用，繼續(xù)報(bào)錯(cuò)。
然后就自己繼續(xù)踩坑。
1.查看插件源碼
根據(jù)報(bào)錯(cuò)文件路徑dist_electron\win-unpacked\resources\app.asar，找到報(bào)錯(cuò)文件里面有background.ts的地方，發(fā)現(xiàn)僅一處
經(jīng)之前的查閱，也意識(shí)到這是配置不對(duì)造成的，本想從vue.config.js的打包配置著手，但卻沒能找到相關(guān)配置文檔（有好心大神有可以提供下嘛）。根據(jù)報(bào)錯(cuò)，就是找不到background.ts，于是想查看打包過程中哪個(gè)打包文件找不到。翻看package.json，找到和electron打包的包vue-cli-plugin-electron-builder，點(diǎn)開包
挨個(gè)從下往上搜索background.js，在index.js里面找到和background.js相關(guān)的代碼
查看這幾段代碼
const usesTypescript = pluginOptions.disableMainProcessTypescript
? false
: api.hasPlugin('typescript')
const mainProcessFile =
pluginOptions.mainProcessFile ||
(usesTypescript ? 'src/background.ts' : 'src/background.js')
是判斷有沒有ts,代碼的邏輯是，如果 pluginOptions.disableMainProcessTypescript是true,那就不用ts，否則判斷項(xiàng)目是否有ts插件（api.hasPlugin(‘typescript’)），因此推想vue-cli-plugin-electron-builder在打包時(shí)，是自動(dòng)判斷是否使用了ts的，這段代碼運(yùn)行結(jié)果usesTypescript 必定為true，為驗(yàn)證想法，在const usesTypescript = pluginOptions.disableMainProcessTypescript ? false : api.hasPlugin('typescript') 下面添加打印console.log("usesTypescript ",usesTypescript ),重新執(zhí)行打包，不出所料，是true.
然后根據(jù)這段代碼
const mainProcessFile =
pluginOptions.mainProcessFile ||
(usesTypescript ? 'src/background.ts' : 'src/background.js')
也就是使用ts的時(shí)候，如果沒有配置自定義的mainProcessFile ，代碼會(huì)去src下尋找background.ts文件
到這里，也就確定了，我的項(xiàng)目里面并沒有配置自定義文件，因此必然回去尋找background.ts，所以項(xiàng)目里面的只能是background.ts，不可以改成background.js
其他幾段代碼，都有outputDir，bundled,讀取的是打包后的文件路徑。
找到輸入文件夾里面的bundled文件夾，發(fā)現(xiàn)里面果然有background.js。從這里確定了，打包時(shí)，除了第一次取項(xiàng)目里面需要用background.ts外，其他都使用background.js，因?yàn)榇a里面是寫死的，除了自定義的名字 以外，并沒有去選擇ts文件的代碼。而且，打包后，肯定不能存在ts代碼。
2.確定環(huán)境
為了確定當(dāng)下環(huán)境打包是否有問題，新創(chuàng)建項(xiàng)目electron-test，并執(zhí)行打包，發(fā)現(xiàn)沒問題。然后將main改為background2.js，打包
報(bào)錯(cuò)：src\background.js in multi ./src/background.js，但是app.asar文件的files變成了background2.js
這段報(bào)錯(cuò)就是在打包的代碼里面，找不到background.js，因?yàn)轫?xiàng)目里面被改成了backgroun2.js，于是更改打包源碼，將background.js全都改錯(cuò)background2.js，再執(zhí)行打包，成功。查看打包后bundle里面的文件，之前的backgroun.js變成了backgroun2.js，從這里推想app.asar里面的files包含的肯定是bundle里面的background.js文件，也是package.json里面的main指定的文件。于是將項(xiàng)目中main入口改成background.js，但是項(xiàng)目的文件還是backgrond.ts。
重新執(zhí)行打包。。。。。
不出所料，報(bào)錯(cuò)了 :(
但是報(bào)錯(cuò)已經(jīng)不一樣了，說明這個(gè)已經(jīng)解決了。新報(bào)錯(cuò)如下：
node_modules\app-builder-lib\templates\nsis\include\StdUtils.nsh
3.中文路徑node_modules\app-builder-lib\templates\nsis\include\StdUtils.nsh
繼續(xù)百度，查到是因?yàn)轫?xiàng)目路徑有中文。本人項(xiàng)目確實(shí)有中文，但是在外面兩層，項(xiàng)目本身是英文的。為了驗(yàn)證外面中文路徑的影響，直接在項(xiàng)目同級(jí)目錄新建項(xiàng)目electron-test2，安裝好，執(zhí)行打包，發(fā)現(xiàn)報(bào)錯(cuò)一樣。那就確實(shí)是中文路徑的原因了。于是將項(xiàng)目的兩層中文路徑都改成拼音，再重新執(zhí)行打包，成功 :)
吐槽：可惡老外，對(duì)咱博大精深的中文還是有歧視哈！！！
4.應(yīng)用白屏
打包終于成功了，可是打開應(yīng)用程序一看，咳咳，白屏，什么都沒有（ps:開發(fā)環(huán)境是正常的）。然后打開之前測(cè)試的打包程序，沒問題，能正常顯示。
聯(lián)想剛才的打包文件，有html文件，和vue路由模式一起思考，vue history模式打包后，本地是點(diǎn)不開的，如果打包后的程序引用了本地文件，會(huì)不會(huì)有這個(gè)一樣的問題？于是將路由模式改錯(cuò)Hash，再重新打包。果然，這次沒有白屏了。
但是這個(gè)似乎不是一個(gè)好的解決方案。因?yàn)閯倓?chuàng)建的測(cè)試的程序，也是history模式，他可以，為啥我的不行？我發(fā)誓沒有更改過入口html的配置。
經(jīng)測(cè)試，發(fā)現(xiàn)如果使用history模式，測(cè)試程序和我自己的項(xiàng)目效果其實(shí)是一樣的。這里出現(xiàn)不同是因?yàn)槲业捻?xiàng)目在app.vue沒有內(nèi)容，只有有個(gè)router-view，如果在app.vue寫點(diǎn)內(nèi)容，也可以顯示，并且通過點(diǎn)擊是可以跳轉(zhuǎn)的。就是初始時(shí)直接定位到其他頁面不行。
然后查看 electron-vue 的官方文檔，看到下面說明：
既然官方都這樣說了，也不想再去折騰。
改為hash即可。
