使用electron-builder时extraResources与extraFiles配置失效求助

1. 修正vue.config.js的配置层级与格式 #

如果使用的是vue-cli-plugin-electron-builder，配置必须放在pluginOptions.electronBuilder.builderOptions下，层级错误会导致配置失效。

正确的extraResources配置示例 #

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraResources: [
          // 从项目根目录的lib文件夹，复制到打包后的resources/lib目录
          {
            from: './lib',
            to: 'lib'
          }
        ]
      }
    }
  }
}

extraFiles的正确写法（逻辑和extraResources一致，仅适用场景不同） #

module.exports = {
  pluginOptions: {
    electronBuilder: {
      builderOptions: {
        extraFiles: [
          {
            from: './lib',
            to: 'lib'
          }
        ]
      }
    }
  }
}

2. 检查路径匹配正确性 #

• 确认./lib是项目根目录下的文件夹，如果lib在src子目录中，路径要改为./src/lib。
• 打包后resources目录的位置：Windows是目标程序.exe/resources（解压exe后可见），Mac是目标程序.app/Contents/Resources，Linux是目标程序文件夹/resources。

3. 清理缓存后重新打包 #

旧缓存可能导致配置不生效，执行以下命令：

# 清理npm缓存
npm cache clean --force
# 删除vue-cli构建缓存
rm -rf node_modules/.cache
# 重新执行打包
npm run electron:build

4. 验证electron与electron-builder版本兼容性 #

版本不匹配会引发各种打包异常，可查看package.json中的版本号，尝试升级到兼容版本：

# 升级electron-builder到最新兼容版
npm install electron-builder@latest --save-dev

5. 快速验证资源是否打包成功 #

在主进程文件（如background.js）中添加代码，运行打包后的程序查看控制台输出：

const path = require('path')
const fs = require('fs')
const libPath = path.join(process.resourcesPath, 'lib')
console.log('lib目录路径:', libPath)
console.log('lib目录是否存在:', fs.existsSync(libPath))

Windows按Ctrl+Shift+I、Mac按Cmd+Option+I打开控制台，确认路径和目录存在性。

内容的提问来源于stack exchange，提问作者胡张驰