Electron中关于静态资源加载问题的解决方案

pnpm install electron-serve

import serve from 'electron-serve'

// 这里填写我们的静态资源目录
serve({ directory: 'renderer' })


function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 1000,
    height: 800,
  })
  // 通过app协议去访问静态资源，这个是electron-serve中处理的，我们只需要这样子写就可以了
  mainWindow.loadURL('app://./index.html')
}

const handler = async (request, callback) => {
    // 获取index文件路径，访问时路径时跳转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);
    // 判断路径是否准确，如果不正确则返回错误
    // ..说明为上级目录或者绝对路径，返回错误
		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,
		});
	};