macOS下构建Electron应用出现ENOENT错误：构建目标找不到HTML模板

问题根源 #

1. 打包后Electron应用的资源文件（如html目录）默认不会放在MacOS目录下，而是被打包到Contents/Resources/app.asar中，你的代码错误地将路径指向了process.execPath所在的MacOS目录，导致文件找不到。
2. MacOS目录属于应用包的只读区域，即使强行将html目录移到此位置，也无法写入output.html，会触发权限错误。

具体解决步骤 #

1. 修正资源路径获取逻辑 #

修改handleInsertHTML函数，使用Electron官方API获取正确的应用根目录和可写入的用户数据目录：

const path = require('path');
const { app, dialog } = require('electron');

function handleInsertHTML( html )
{
    // 获取应用根目录（打包后指向app.asar内部的应用根路径）
    const appRoot = app.isPackaged ? app.getAppPath() : path.resolve(__dirname);
    // 模板文件的正确路径
    const templatePath = path.join(appRoot, 'html', 'index.html');
    
    // 获取用户可写入的数据目录（规避应用包只读限制）
    const userDataDir = app.getPath('userData');
    const outputPath = path.join(userDataDir, 'output.html');

    try
    {
        return insertHTML(
            html,
            templatePath,
            outputPath
        );
    }
    catch( error )
    {
        dialog.showErrorBox(
            "In insertHTML()",
            error.message
        );
    }
}

2. 确保electron-builder正确打包资源 #

你的electron-builder.json配置已经包含html/**/*，但需确认构建脚本的工作目录正确：
检查build.sh中的PROJECT_DIR变量是否指向项目下的src目录，示例调整：

# 设置PROJECT_DIR为src目录
PROJECT_DIR="./src"
cd "$PROJECT_DIR"
echo "Now is in $(pwd)"
npm install

确认后，electron-builder会自动将src/html目录打包到应用内部资源路径中。

3. 可选：禁用asar打包用于调试 #

如果需要查看打包后的文件结构，可临时禁用asar打包，在electron-builder.json中添加：

{
    "asar": false
}

此时html目录会出现在Contents/Resources/app下，方便验证路径。调试完成后建议重新开启asar，以提升应用安全性和加载效率。

验证 #

1. 重新执行构建：sh script/build.sh
2. 运行打包后的应用，生成的output.html会存放在~/Library/Application Support/Markdown Viewer目录下，同时模板文件可被正确读取。

内容的提问来源于stack exchange，提问作者HavingPainfulAGO