小知識，大挑戰(zhàn)！本文正在參與「程序員必備小知識」創(chuàng)作活動
本文已參與 「掘力星計劃」 ，贏取創(chuàng)作大禮包，挑戰(zhàn)創(chuàng)作激勵金
上一篇文章Vite+Electron快速構(gòu)建一個VUE3桌面應用(二)——動態(tài)模塊熱重載完成了開發(fā)時的動態(tài)模塊熱重載功能，現(xiàn)在是時候來看看怎么完成最后一步——打包了。
系列文章：
先說結(jié)論，重點還是在于mainWindow.loadURL()。
打包后還是加載http://localhost:3000是無法運行的，因此，此處需要先用vite打包好，然后使用electron-builder加載vite打包后的文件進行打包。
為了代碼能夠根據(jù)不同環(huán)境在運行時加載http://localhost:3000，在打包時加載文件，此處需要使用環(huán)境變量來切換生產(chǎn)和開發(fā)環(huán)境。
此處使用環(huán)境變量NODE_ENV來切換生產(chǎn)和開發(fā)環(huán)境，生產(chǎn)環(huán)境為NODE_ENV=production，開發(fā)環(huán)境為NODE_ENV=development，若有其它如release等環(huán)境可在此基礎上拓展。
在項目根目錄下創(chuàng)建文件夾electron，將main.js和preload.js文件移動進來。其結(jié)構(gòu)如下所示：
.
├── README.md
├── electron
│ ├── main.js
│ └── preload.js
...
復制代碼若還是不太明白可以看看源碼中文件結(jié)構(gòu)。
該文件主要是需要根據(jù)環(huán)境變量切換electron加載的內(nèi)容，修改內(nèi)容如下：
mainWindow.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
復制代碼修改后的完整內(nèi)容如下：
// electron/main.js
// 控制應用生命周期和創(chuàng)建原生瀏覽器窗口的模組
const { app, BrowserWindow } = require('electron')
const path = require('path')
const NODE_ENV = process.env.NODE_ENV
function createWindow () {
// 創(chuàng)建瀏覽器窗口
const mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
preload: path.join(__dirname, 'preload.js')
}
})
// 加載 index.html
// mainWindow.loadFile('dist/index.html') 將該行改為下面這一行，加載url
mainWindow.loadURL(
NODE_ENV === 'development'
? 'http://localhost:3000'
:`file://${path.join(__dirname, '../dist/index.html')}`
);
// 打開開發(fā)工具
if (NODE_ENV === "development") {
mainWindow.webContents.openDevTools()
}
}
// 這段程序?qū)?Electron 結(jié)束初始化
// 和創(chuàng)建瀏覽器窗口的時候調(diào)用
// 部分 API 在 ready 事件觸發(fā)后才能使用。
app.whenReady().then(() => {
createWindow()
app.on('activate', function () {
// 通常在 macOS 上，當點擊 dock 中的應用程序圖標時，如果沒有其他
// 打開的窗口，那么程序會重新創(chuàng)建一個窗口。
if (BrowserWindow.getAllWindows().length === 0) createWindow()
})
})
// 除了 macOS 外，當所有窗口都被關閉的時候退出程序。 因此，通常對程序和它們在
// 任務欄上的圖標來說，應當保持活躍狀態(tài)，直到用戶使用 Cmd + Q 退出。
app.on('window-all-closed', function () {
if (process.platform !== 'darwin') app.quit()
})
// 在這個文件中，你可以包含應用程序剩余的所有部分的代碼，
// 也可以拆分成幾個文件，然后用 require 導入。
復制代碼首先修改main 屬性，將main: main.js改為main: electron/main.js。
{
"name": "kuari",
"version": "0.0.0",
"main": "electron/main.js",
...
}
復制代碼接著，編輯build屬性：
"build": {
"appId": "com.your-website.your-app",
"productName": "ElectronApp",
"copyright": "Copyright ? 2021 <your-name>",
"mac": {
"category": "public.app-category.utilities"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "dist_electron"
}
}
復制代碼然后，更新scripts屬性。
此處需要先安裝兩個庫：
cross-env: 該庫讓開發(fā)者只需要注重環(huán)境變量的設置，而無需擔心平臺設置electron-builder: electron打包庫yarn add -D cross-env electron-builder
復制代碼更新后的scripts如下：
{
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .", // 此處需要設置環(huán)境變量以保證開發(fā)時加載url
"electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\"",
"electron:build": "vite build && electron-builder" // 新增打包命令
}
復制代碼最后，更新后的package.json完整內(nèi)容如下：
{
"name": "kuari",
"version": "0.0.0",
"main": "electron/main.js",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview",
"electron": "wait-on tcp:3000 && cross-env NODE_ENV=development electron .",
"electron:serve": "concurrently -k \"yarn dev\" \"yarn electron\"",
"electron:build": "vite build && electron-builder"
},
"dependencies": {
"vue": "^3.2.16"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"concurrently": "^6.3.0",
"cross-env": "^7.0.3",
"electron": "^15.1.2",
"electron-builder": "^22.13.1",
"vite": "^2.6.4",
"wait-on": "^6.0.0"
},
"build": {
"appId": "com.my-website.my-app",
"productName": "MyApp",
"copyright": "Copyright ? 2021 kuari",
"mac": {
"category": "public.app-category.utilities"
},
"nsis": {
"oneClick": false,
"allowToChangeInstallationDirectory": true
},
"files": [
"dist/**/*",
"electron/**/*"
],
"directories": {
"buildResources": "assets",
"output": "dist_electron"
}
}
}
復制代碼直接執(zhí)行打包命令即可開始打包。
yarn electron:build
復制代碼打包完成之后，會多出兩個文件夾dist和dist_electron，其文件結(jié)構(gòu)如下：
.
├── README.md
├── dist
│ ├── assets
│ ├── favicon.ico
│ └── index.html
├── dist_electron
│ ├── MyApp-0.0.0-mac.zip
│ ├── MyApp-0.0.0-mac.zip.blockmap
│ ├── MyApp-0.0.0.dmg
│ ├── MyApp-0.0.0.dmg.blockmap
│ ├── builder-debug.yml
│ ├── builder-effective-config.yaml
│ └── mac
...
復制代碼至此，便完成了打包。
后面再來寫寫關于electron的優(yōu)化，減少electron打包后應用的體積。（這玩意兒確實打包下來有點大呢/狗頭）
