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

今天來給大家分享一個比較實用的npm包，electron-serve

它是用來干嘛的呢

通常，我們在使用electron框架的時候會使用到loadFile/loadURL進行頁面的加載，分別是加載本地文件和加載網(wǎng)絡(luò)文件

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

這是因為我們構(gòu)建出來的產(chǎn)物中資源引入路徑出現(xiàn)了問題

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

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

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

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

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

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

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

electron-serve

這就到了本篇文章的主角，electron-serve登場了

pnpm install electron-serve

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

我們使用它也是很簡單的，只要在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)資源，這個是electron-serve中處理的，我們只需要這樣子寫就可以了
  mainWindow.loadURL('app://./index.html')
}

配置好之后，我們再運行一下項目，這時你就會發(fā)現(xiàn)找不到資源的問題已經(jīng)得到解決了

另外，這個庫還解決了一個問題：當(dāng)我們使用loadFile加載本地文件時，是無法正常使用vue-router/react-router中的history模式的。因為這些路由機制依賴于history.pushState，因為loadFile使用的是file協(xié)議，會導(dǎo)致找不到對于路徑的資源

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

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

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

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

const handler = async (request, callback) => {
    // 獲取index文件路徑，訪問時路徑時跳轉(zhuǎn)index.html
		const indexPath = path.join(options.directory, `${options.file}.html`);
    // 處理請求的路徑文件
		const filePath = path.join(options.directory, decodeURIComponent(new URL(request.url).pathname));
    // 獲取相對路徑
		const relativePath = path.relative(options.directory, filePath);
    // 判斷路徑是否準(zhǔn)確，如果不正確則返回錯誤
    // ..說明為上級目錄或者絕對路徑，返回錯誤
		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中的一種壓縮包格式），如果不是則返回錯誤
		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)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論