本文主要是描述electron中路徑相關(guān)的問(wèn)題
- 靜態(tài)資源丟失的原因
- 靜態(tài)資源路徑一致性處理方案-resolvePath
- 常用路徑---userPath/appData/文檔
- pathUtil的封裝
一螟左、靜態(tài)資源丟失的原因
Electron常見(jiàn)問(wèn)題（二）Electron圖標(biāo)打包我們討論過(guò)靜態(tài)資源的打包咨堤，但有時(shí)候我們會(huì)碰到在local環(huán)境運(yùn)行程序的時(shí)候靜態(tài)資源可以看到蔚携，但是build成產(chǎn)品后靜態(tài)資源丟失的情況肤频。
這里用托盤(pán)圖標(biāo)舉例愉棱。
托盤(pán)圖標(biāo)的靜態(tài)資源我們通過(guò)extraResources復(fù)制操作放到打包后的文件中
package.json
{
...
"build": {
...
"extraResources": [
{
"from": "icons/",
"to": "icons/"
} // 可以移動(dòng)多個(gè)文件夾，from-to
],
...
},
...
}
打包后的icons會(huì)復(fù)制到文件的resources中
local環(huán)境中我們引入圖標(biāo)使用相對(duì)路徑來(lái)引入圖標(biāo)
const iconName =process.platform === 'win32' ?
'icons/windows-icon.png' : 'icons/iconTemplate.png';
const ningImage = nativeImage.createFromPath(iconName);
tray = new Tray(ningImage);
我們的主代碼會(huì)被打包在app.asar中
對(duì)于主代碼來(lái)說(shuō)，圖標(biāo)的位置在 'icons/windows-icon.png' 沒(méi)有錯(cuò)沐旨。
但在local環(huán)境我們的主代碼在app/main.developments.ts中，這樣 'icons/windows-icon.png' 是找不到對(duì)應(yīng)的icon的榨婆。
二磁携、 靜態(tài)資源路徑一致性處理方案-resolvePath
為了解決路徑不一致的情況，我們可以封裝一個(gè)resolvePath類良风，將local環(huán)境的路徑和產(chǎn)品環(huán)境的路徑相一致谊迄。
export default class PathUtils {
// 將startPath作為標(biāo)準(zhǔn)路徑，靜態(tài)資源的路徑和項(xiàng)目中使用到的路徑全部由startPath起始
public static startPath = path.join(__dirname, '..');
public static resolvePath = (dirPath) => {
return path.join(PathUtils.startPath, dirPath || '.');
};
}
這樣拖吼，相應(yīng)的tray圖標(biāo)引入方式改為
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/文檔
我們系統(tǒng)的配置文件通常放到用戶目錄下忌愚，如 C://User/Administrator/xxxconfig.json 中态鳖，這個(gè)路徑一般稱為userProfile,但是這是初始的情況在孝，有的用戶系統(tǒng)盤(pán)放在D盤(pán)E盤(pán)等其他盤(pán)，這時(shí)對(duì)應(yīng)的用戶目錄位置也會(huì)改變怠硼。
所以我們的用戶目錄一般使用userProfile來(lái)獲取鬼贱，這個(gè)變量在electron的環(huán)境變量中也是可以找到的。
process.env['USERPROFILE'];
同樣的用戶的緩存目錄APPDATA路徑為
process.env['APPDATA']
還有一個(gè)常用路徑是文檔香璃，我們熟知的qq这难，微信等接受到的文件一般都會(huì)緩存在這個(gè)位置。
而文檔的位置在electron中是找不到的葡秒，而且文檔映射的路徑也是可以手動(dòng)編輯的姻乓。
但它最終是存在注冊(cè)表中的。所以我們需要花些手段去讀取注冊(cè)表眯牧。
好在網(wǎng)上可以找到regedit組件可以讓nodejs訪問(wèn)注冊(cè)表蹋岩。
接下來(lái)我們只要找到文檔對(duì)應(yīng)的位置就可以了。
四学少、pathUtil的封裝
增加了userPath/appData/文檔路徑剪个，我們的pathUtil也要進(jìn)行升級(jí)，如下
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);
}
}
});
});
};
