Angular+Electron打包：如何将Windows应用移至指定主目录？

我来帮你解决这个路径问题，核心是分别配置ng build的输出目录，再调整electron-packager的打包参数，让最终的Windows应用直接生成到你想要的dist/win/x64目录下。

步骤1：配置Angular的构建输出路径 #

首先确保Angular项目编译后的产物（index.html、静态资源等）输出到一个独立的临时目录，避免和Electron打包产物混在一起。修改项目根目录下的angular.json：

{
  "projects": {
    "your-project-name": {
      "architect": {
        "build": {
          "options": {
            "outputPath": "dist/electron-src", // 设置为临时编译目录，和最终打包目录区分开
            // 其他原有配置保持不变
          }
        }
      }
    }
  }
}

执行ng build --prod后，Angular的编译产物就会生成到dist/electron-src目录中。

步骤2：调整Electron-Packager的打包参数 #

Electron-Packager默认会在指定输出目录下创建形如appname-win32-ia32的子目录，我们可以通过参数直接让它把应用文件输出到目标主目录，同时指定输入目录为Angular的编译产物目录。

修改package.json里的打包脚本：

{
  "scripts": {
    "package-win": "electron-packager ./dist/electron-src YourAppName --platform=win32 --arch=x64 --out=./dist/win/x64 --overwrite --ignore='node_modules' --no-prune"
  }
}

重点参数解释：

• ./dist/electron-src：指定Electron打包的输入源（就是Angular刚编译好的产物目录）
• --out=./dist/win/x64：直接指定最终输出目录为你想要的主目录
• --overwrite：覆盖已存在的旧打包文件，不用每次手动删除目录
• --ignore='node_modules'：忽略不必要的文件，减少最终包体积

执行npm run package-win后，Electron就会把Windows应用的所有文件（exe程序、资源文件等）直接生成到dist/win/x64目录下，不会再创建额外的子目录。

额外优化：一键完成构建+打包 #

如果想一步搞定编译和打包，可以在package.json里写一个组合脚本：

{
  "scripts": {
    "build-package": "ng build --prod && npm run package-win"
  }
}

以后执行npm run build-package就能一键完成Angular编译和Electron打包。

排查小提示 #

• 确保安装的是最新版electron-packager，旧版本参数可能有差异
• 如果之前有残留的打包文件，先手动删除dist/win/x64目录再重新打包，避免缓存干扰
• 检查Electron主进程文件（比如main.js）里的index.html路径是否正确，确保应用能正常启动

内容的提问来源于stack exchange，提问作者Andrei García