問題場景：
最近項目遇到一個需求，Electron應用，要在本地給客戶提供一個文件上傳模板，在非聯網環境下，用戶可通過Electron應用下載該模板，進行本地保存。
於是涉及到兩個問題：
-1.如何把模板文件打包到Electron應用的安裝目錄中
-2.Electron應用運行時，如何訪問到該文件模板資源
看了好多文章，還是沒有找到一個很清晰的答案，后來摸索試驗成功了，在此記錄一下，希望對你有幫助，由於項目使用的是electron-builder打包器來打包的，這里主要針對electron-builder打包配置來講解。
解決方案
下面是常用的electron-builder打包配置
package.json文件
{
"name": "demo",
"version": "0.0.1",
"build": { // electron-builder配置
"productName":"xxxx",//項目名 這也是生成的exe文件的前綴名
"appId": "xxxxx",//包名
"copyright":"xxxx",//版權 信息
"compression": "store", // "store" | "normal"| "maximum" 打包壓縮情況(store 相對較快)，store 39749kb, maximum 39186kb
"directories": {
"output": "build" // 輸出文件夾
},
"asar": false, // asar打包
"extraResources": { // 拷貝dll等靜態文件到指定位置
"from": "./extraResources/",
"to": "extraResources"
},
"win": {
"icon": "build/icons/icon.ico",//圖標路徑
"target": [
{
"target": "nsis",
"arch": [
"ia32"
]
}
]
},
"nsis": {
"oneClick": false, // 一鍵安裝
"guid": "xxxx", //注冊表名字，不推薦修改
"perMachine": true, // 是否開啟安裝時權限限制（此電腦或當前用戶）
"allowElevation": true, // 允許請求提升。 如果為false，則用戶必須使用提升的權限重新啟動安裝程序。
"allowToChangeInstallationDirectory": true, // 允許修改安裝目錄
"installerIcon": "./build/icons/aaa.ico", // 安裝圖標
"uninstallerIcon": "./build/icons/bbb.ico", //卸載圖標
"installerHeaderIcon": "./build/icons/aaa.ico", // 安裝時頭部圖標
"createDesktopShortcut": true, // 創建桌面圖標
"createStartMenuShortcut": true, // 創建開始菜單圖標
"shortcutName": "xxxx" // 圖標名稱
}
}
}
回到開始的問題：
1.如何把模板文件打包到Electron應用的安裝目錄中
答：在package.json文件中 extraResources配置項做了說明“拷貝dll等靜態文件到指定位置”，
from和to表示從哪移到哪兒，'./'指向存放package.json的同級目錄，如圖所示：
在項目根目錄下新建extraResources文件夾用於存放模板資源文件，即配置中from的來源，
打包后，則在app的兄弟目錄下生成extraResources文件夾，即配置中to的定義的名稱，並存入來自from的模板文件，如下圖：
2.Electron應用運行時，如何訪問到該文件模板資源
答：使用 process.cwd() 即可獲取到，當前程序的運行路徑如 C:\Users\administrator\AppData\Local\Programs\應用名，文件路徑為
import path from 'path'
let templateFilePath = path.join(process.cwd(), '/resources/extraResources','template.zip')
if (process.env.NODE_ENV === 'development') {
templateFilePath = path.join(process.cwd(), '/extraResources','template.zip')
}
console.log(templateFilePath )