Electron中dialog弹窗为啥在打包后不显示？

这个问题挺常见的，基本就是打包配置的问题。

electron-builder 打包后，electron 核心模块的路径会变，你直接在主进程用 require('electron') 在开发环境没问题，但打包后可能找不到。

试试在主进程开头加上这段：

const path = require('path');



// 解决打包后 electron 模块找不到的问题let dialog;

if (process.env.NODE_ENV === 'development') {

  dialog = require('electron').dialog;

} else {

  dialog = require('electron').dialog;

}

其实更根本的解决办法是检查你的 electron-builder 配置。确认一下打包配置里有没有处理好 electron 依赖：

// electron-builder.json 或者 package.json 中的 build 配置

{

  "appId": "your.app.id",

  "productName": "YourApp",

  "directories": {

    "output": "dist"

  },

  "files": [

    "package.json",

    "dist/**/*",

    "node_modules/**/*",

    "!node_modules/electron/**/*"

  ],

  "extraResources": []

}

还有一个可能的坑：如果你的项目用了 asar 打包，electron 的某些原生模块可能会出问题。可以先试试把 asar 关掉调试一下：

"asar": false

关掉 asar 后如果能正常弹出了，那就是 asar 打包 electron 原生模块的兼容性问题。

你先试试在主进程里加个 console.log 看看 dialog 是不是 undefined，确认下到底是模块没加载到还是弹窗本身的问题。

这问题太经典了，妥妥的 asar 打包坑。

dialog.showOpenDialog 在开发环境正常，打包后失效，基本就是 asar 打包的锅。electron 把整个 app 打成压缩包后，某些 native 模块会抽风。

解决办法很简单，在你的 electron-builder 配置文件（package.json 或者 electron-builder.yml）里加上 asarUnpack：

"build": {

  "asar": true,

  "asarUnpack": [

    "**/node_modules/electron/**"

  ]

}

如果还不行，可能是 preload 脚本那边的问题。检查一下打包后 preload 路径对不对，很多人是这里翻车的：

// 主进程里别用 __dirname，直接用 process.resourcesPath

const preloadPath = path.join(__dirname, 'preload.js')

// 改成

const preloadPath = path.join(process.resourcesPath, 'app', 'preload.js')

// 或者用这个更靠谱的方式

const preloadPath = path.join(app.getAppPath(), 'preload.js')

还有个容易忽略的点：确认打包后你的 preload.js 确实在 dist 目录里，有时候没配置好会漏掉。

你先试试加 asarUnpack，十有八九能解决。