Vue cli3 cli2 項目 創建electron項目多入口，多模塊

情景分析

• 一個electron項目如果是公司的企業項目，一般包含了開啓後臺master的功能，這樣就會帶來一些列的問題：

  • 如果將起master直接放再路由裏，在開發的時候，熱重載會或者刷新（Ctrl + R）這一類操作會造成master掉線的情況；
  • 當同時存在web環境和electron環境時，路由的切換和準備將是一大麻煩事兒！
  • 可能存在一個需求需要不影響當前路由的同時，開啓另一個頁面進行一系列操作，然後將結果返回，或者接受主路由（主窗口的消息）進行計算和解析並生成結果；
  • …

• 此文目的： 記錄一個項目架構，同時能編譯出web端和electron端代碼，並且electron作爲pc端能打開副窗口進行渲染。類似需求：啓動頁，登錄頁，加載頁（大型應用可能需要加載很多資源，需要等待資源下載完成，同時加載頁能有進度顯示等等），大型網頁或項目需要同時渲染兩個模塊並能使模塊之間正常通信！

準備

• 你需要創建好一個基礎項目：

目前我使用的是cli3，但是並不影響這個知識！
腳手架添加好項目後：vue add electron-builder即可自動將項目轉換成web和pc雙端的代碼，運行npm run serve 或 npm run electron:serve即可編譯運行。

修改配置：

• cli2

如果你是cli2生成的項目，那麼在這個文件下找到webpack.renderer.config.js：

此處的entry是渲染入口，webpack會根據這個入口查找到文件關聯，將文件打包和壓縮，將工程文件和第三方工具插件分別打包成bundle 和 app 的chunkhash 值文件。

入口的文件路徑對應你的包含（new Vue({})）的那個文件，名稱不中要，重要的是輸出：

找到和modules、entry同級作用域下的plugins,注意它是個數組

首先你要保證你的項目安裝了HtmlWebpackPlugin這個插件，這個插件的作用就是打包你的項目，配置項的含義：

filename： 打包之後的文件名稱；
title：cli2特有的html模板文件的網頁的title，模板文件就是那個 .ejs結尾的那個文件，名稱你也可以隨意改；
chunks：打包之後的壓縮文件開頭名稱；
template： 打包時你的入口文件（比如main.js）依賴的模板文件；
minify：需要怎麼壓縮，比如刪除空格，刪除換行，刪除console等等；
默認開發環境會忽略node_modules裏的第三方工具，而開發環境build的時候是不會啓動項目，直接把文件壓縮在一起的，所以配置mode_modules就這樣就行。

這樣就大功告成了？

• 還有electron的配置：

electron的配置在src/main/index.js裏（如果你沒有動它的話）

首先： 配置各個窗口加載的文件（其實就是部署的時候你編譯好的那些多入口生成的文件）：

按照我之前的配置，開發環境會根據你啓動的端口創建服務，這些文件會自動在你設置的輸出路徑下形成服務：

如果是build web的話，配置的地方和electron一樣，只需要更改好entry和plugins就行；

生成的文件就像這樣（這個是執行了build：web，electron如果配置了electron-packager會打包成.asar文件，這個文件用electron.exe打開會直接開啓像dev運行時候的界面）：

然後你在createwindow的會後將上面的url傳入就可以了（這個winURL）就是上面賦值的URL，每個窗口對應那個url

值得注意的是，那些入口文件記得它們一定是一個單獨的vue項目文件，有自己的Vue實例！如果你加載的新窗口是原來Vue實例的某個路由，很可能會發生混亂，而且功能耦合嚴重，不利於日後維護！

• cli3

相比起來，cli3因爲尤大大團隊對webpack做了優化，默認包含了優秀的webpack配置，而vue.config.js裏的配置默認是合併配置，所以，改起來很方便！

首先，cli3生成的electron項目包含默認的electron配置文件是background.js， 自定義的webpack配置需要在根目錄新建vue.config.js文件

cli3 配置多入口：

簡單的一匹，在導出的對象第一級直接寫上pages，鍵每一項都表示路徑，值也表示路徑，清晰易懂；

細節：上面的lload/index是爲了窗口的url加載出來的時候是localhost:8090/load 而不是 localhost:8090/load.html 如果副窗口有哈希路由，不是index的會出現 localhost:8090/load.html/#/home 這種問題；

load.js:

background.js配置：

process.env.WEBPACK_DEV_SERVER_URL是你的服務localhost:8090地址，端口不要在意。

配置好後在你需要的時候打開你的窗口，加載對應文件地址就行。

runbuild 生成的靜態文件可以直接放在服務器部署，以我上面的配置build出來的文件張這個樣子：

這樣，多窗口，多入口配置算是完成了！

但是你會發現，這樣的配置雖然完美運行沒有問題，卻忽略了一個重要問題！

• 編譯運行dev是當前環境下，也就是本地環境，此時的環境裏可能和未來編譯發佈的生產環境有差異，比如編譯electron爲程序時，"load/index"的操作實際上對於linux內核下來說是不能成功的，build保證能在服務器裏跑，所以編譯的機制都會按照linux裏跑，那麼斜槓就是罪魁禍首，矛盾的是，JavaScript語言裏只有斜槓代表對象層級，或者用"."，但編譯成程序又過不了，因爲編譯程序在生成路徑的時候認不到你這個點是啥！
• 靠譜的解決辦法：
  
  cli在輸出文件的時候取了文件名，這個文件名就是編譯成功之後保存的文件名稱，關鍵點來了，都是字符串傳給nodejs的fs模塊，我就嘟cil沒有做非法字符串或者反斜槓處理，結果一試還真是，那麼加上雙反斜槓之後，生成路徑的時候拼接進去的就是一個帶路徑的文件名，之所以是反斜槓就是因爲控制檯和nodejs輸出時採用文件系統路徑規範，恰好和url和對象路徑規範相反！