Electron中的關(guān)于靜態(tài)資源加載問題解決方案

今天來(lái)給大家分享一個(gè)比較實(shí)用的npm包，electron-serve

它是用來(lái)干嘛的呢

通常，我們?cè)谑褂?code>electron框架的時(shí)候會(huì)使用到loadFile/loadURL進(jìn)行頁(yè)面的加載，分別是加載本地文件和加載網(wǎng)絡(luò)文件

在構(gòu)建生產(chǎn)環(huán)境中，當(dāng)我們使用loadFile加載本地文件的時(shí)候可能會(huì)出現(xiàn)資源找不到的情況，（net::ERR FILE NOT FOUND）

這是因?yàn)槲覀儤?gòu)建出來(lái)的產(chǎn)物中資源引入路徑出現(xiàn)了問題

比如您使用了Vite構(gòu)建工具，您需要在vite.config.ts將base屬性設(shè)置為./，告訴Vite我的資源路徑都是相對(duì)于當(dāng)前頁(yè)面的目錄的

那么，在electron中引入是沒問題的，但事情總不是那么一帆風(fēng)順的

當(dāng)nuxtjs/nextjs想引入到electron中顯示時(shí)，你會(huì)遇到資源路徑引用的問題(如下圖)

那么這個(gè)問題怎么解決，前面我們提到只要將base設(shè)置./，就可以解決這個(gè)問題，但在nuxt中這并不能生效

它還是以一個(gè)絕對(duì)路徑的方式去尋找它的依賴，所以還是會(huì)出現(xiàn)找不到的問題

這個(gè)時(shí)候，我們可以換一種解決方式，不應(yīng)該一頭扎進(jìn)base里

我們是不是可以像開發(fā)環(huán)境一樣開一個(gè)devServer來(lái)解決這個(gè)問題？

electron-serve

這就到了本篇文章的主角，electron-serve登場(chǎng)了

pnpm install electron-serve

它是一個(gè)在electron中開啟靜態(tài)服務(wù)器的npm包，讓我們可以以網(wǎng)絡(luò)協(xié)議的方式去訪問我們的靜態(tài)資源

我們使用它也是很簡(jiǎn)單的，只要在electron主線程中的main.js/ts中引入它，并調(diào)用它的serve方法即可

import serve from 'electron-serve'

// 這里填寫我們的靜態(tài)資源目錄
serve({ directory: 'renderer' })


function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
  })
  // 通過app協(xié)議去訪問靜態(tài)資源，這個(gè)是electron-serve中處理的，我們只需要這樣子寫就可以了
  mainWindow.loadURL('app://./index.html')
}

配置好之后，我們?cè)龠\(yùn)行一下項(xiàng)目，這時(shí)你就會(huì)發(fā)現(xiàn)找不到資源的問題已經(jīng)得到解決了

另外，這個(gè)庫(kù)還解決了一個(gè)問題：當(dāng)我們使用loadFile加載本地文件時(shí)，是無(wú)法正常使用vue-router/react-router中的history模式的。因?yàn)檫@些路由機(jī)制依賴于history.pushState，因?yàn)?code>loadFile使用的是file協(xié)議，會(huì)導(dǎo)致找不到對(duì)于路徑的資源

electron-serve的實(shí)現(xiàn)原理

翻看了下源碼，發(fā)現(xiàn)electron-serve的實(shí)現(xiàn)原理很簡(jiǎn)單

• 大致分為下面兩步
  • 當(dāng)electron時(shí)，創(chuàng)建一個(gè)會(huì)話（或者使用外部傳入的會(huì)話）
  • 先是注冊(cè)了一個(gè)特定的協(xié)議為app（這個(gè)參數(shù)是可以外部傳入的，默認(rèn)為App），告訴electron當(dāng)遇到這個(gè)app協(xié)議的時(shí)候，應(yīng)該使用提供的hander函數(shù)進(jìn)行處理

handler函數(shù)實(shí)現(xiàn)

const handler = async (request, callback) => {
    // 獲取index文件路徑，訪問時(shí)路徑時(shí)跳轉(zhuǎn)index.html
		const indexPath = path.join(options.directory, `${options.file}.html`);
    // 處理請(qǐng)求的路徑文件
		const filePath = path.join(options.directory, decodeURIComponent(new URL(request.url).pathname));
    // 獲取相對(duì)路徑
		const relativePath = path.relative(options.directory, filePath);
    // 判斷路徑是否準(zhǔn)確，如果不正確則返回錯(cuò)誤
    // ..說明為上級(jí)目錄或者絕對(duì)路徑，返回錯(cuò)誤
		const isSafe = !relativePath.startsWith('..') && !path.isAbsolute(relativePath);

		if (!isSafe) {
			callback({error: FILE_NOT_FOUND});
			return;
		}
    // 最終得到的路徑
		const finalPath = await getPath(filePath, options.file);
    // 獲取文件的后綴
		const fileExtension = path.extname(filePath);
    // 判斷文件是否為html或者asar（electron中的一種壓縮包格式），如果不是則返回錯(cuò)誤
		if (!finalPath && fileExtension && fileExtension !== '.html' && fileExtension !== '.asar') {
			callback({error: FILE_NOT_FOUND});
			return;
		}
    // 最后返回資源路徑
		callback({
			path: finalPath || indexPath,
		});
	};

到此這篇關(guān)于Electron中關(guān)于靜態(tài)資源加載問題的解決方案的文章就介紹到這了,更多相關(guān)Electron靜態(tài)資源加載問題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論