Electron常見問題 常用路徑/靜態資源丟失

 

本文主要是描述electron中路徑相關的問題

• 靜態資源丟失的原因
• 靜態資源路徑一致性處理方案-resolvePath
• 常用路徑---userPath/appData/文檔
• pathUtil的封裝

一、靜態資源丟失的原因

Electron常見問題（二）Electron圖標打包我們討論過靜態資源的打包，但有時候我們會碰到在local環境運行程序的時候靜態資源可以看到，但是build成產品后靜態資源丟失的情況。
這里用托盤圖標舉例。
托盤圖標的靜態資源我們通過extraResources復制操作放到打包后的文件中

package.json { ... "build": { ... "extraResources": [ { "from": "icons/", "to": "icons/" } // 可以移動多個文件夾，from-to ], ... }, ... } 

打包后的icons會復制到文件的resources中

 

 

 

local環境中我們引入圖標使用相對路徑來引入圖標

const iconName =process.platform === 'win32' ? 'icons/windows-icon.png' : 'icons/iconTemplate.png'; const ningImage = nativeImage.createFromPath(iconName); tray = new Tray(ningImage); 

我們的主代碼會被打包在app.asar中

 

主代碼打包位置

 

對於主代碼來說，圖標的位置在 'icons/windows-icon.png' 沒有錯。

但在local環境我們的主代碼在app/main.developments.ts中，這樣 'icons/windows-icon.png' 是找不到對應的icon的。

 

 

 

二、 靜態資源路徑一致性處理方案-resolvePath

為了解決路徑不一致的情況，我們可以封裝一個resolvePath類，將local環境的路徑和產品環境的路徑相一致。

export default class PathUtils { // 將startPath作為標准路徑，靜態資源的路徑和項目中使用到的路徑全部由startPath起始 public static startPath = path.join(__dirname, '..'); public static resolvePath = (dirPath) => { return path.join(PathUtils.startPath, dirPath || '.'); }; } 

這樣，相應的tray圖標引入方式改為

const iconName = process.platform === 'win32' ? PathUtils.resolvePath('icons/windows-icon.png') : PathUtils.resolvePath('icons/iconTemplate.png'); const ningImage = nativeImage.createFromPath(iconName); tray = new Tray(ningImage); 

三、常用路徑---userPath/appData/文檔

我們系統的配置文件通常放到用戶目錄下，如 C://User/Administrator/xxxconfig.json 中，這個路徑一般稱為userProfile,但是這是初始的情況，有的用戶系統盤放在D盤E盤等其他盤，這時對應的用戶目錄位置也會改變。
所以我們的用戶目錄一般使用userProfile來獲取，這個變量在electron的環境變量中也是可以找到的。

process.env['USERPROFILE']; 

同樣的用戶的緩存目錄APPDATA路徑為

process.env['APPDATA'] 

還有一個常用路徑是文檔，我們熟知的qq，微信等接受到的文件一般都會緩存在這個位置。

 

 

 

常用路徑文檔庫

而文檔的位置在electron中是找不到的，而且文檔映射的路徑也是可以手動編輯的。
但它最終是存在注冊表中的。所以我們需要花些手段去讀取注冊表。
好在網上可以找到regedit組件可以讓nodejs訪問注冊表。
接下來我們只要找到文檔對應的位置就可以了。

 

 

注冊表中的文檔位置

 

四、pathUtil的封裝

增加了userPath/appData/文檔路徑，我們的pathUtil也要進行升級，如下

export default class PathUtils { public static startPath = path.join(__dirname, '..'); public static userPath = process.env['USERPROFILE']; public static userDocPath; public static appdataPath = process.env['APPDATA']; public static resolvePath = (dirPath) => { return path.join(PathUtils.startPath, dirPath || '.'); }; public static resolveUserPath = (dirPath) => { return path.join(PathUtils.userPath, dirPath || '.'); }; public static resolveUserDocPath = (dirPath) => { return new Promise((resolve, reject) => { getUserDoc().then((docPath: string) => { PathUtils.userDocPath = docPath; resolve(PathUtils.userDocPath); }); }); }; } const getUserDoc = () => { return new Promise((resolve, reject) => { const regedit = require('regedit'); regedit.setExternalVBSLocation(PathUtils.resolvePath('vbs')); const key = 'HKCU\\Software\\Microsoft\\Windows\\CurrentVersion\\Explorer\\User Shell Folders'; regedit.list(key, function(err, result) { if (err) { console.error('Window Reg:', err); } else { try { resolve(result[key].values['Personal'].value); } catch (e) { const docPath = path.join(PathUtils.userPath, 'Documents'); if (!fs.existsSync(docPath)) { fs.mkdirSync(docPath); } resolve(docPath); } } }); }); };