Electron+Angular项目构建打包始终输出旧版本应用如何解决？

核心现象：执行npm-run-all -p electron:serve ng:serve调试态可运行最新代码，但使用electron-forge、electron-packager打包均输出首次构建的旧版本，两类打包工具表现一致，问题基本和打包工具本身无关，按以下顺序排查即可：

• 先补全打包前置的生产构建步骤
  绝大多数官方示例的默认打包脚本不会自动触发Angular全量生产构建，会直接读取项目根目录dist/文件夹下的历史残留文件。先删除原有dist目录，根据你的Angular版本执行对应生产构建命令：
  • Angular 11及更早版本：ng build --prod
  • Angular 12+版本：ng build --configuration production
    确认dist目录下所有文件的修改时间为当前最新时间后，再执行打包命令，不要跳过前端构建步骤直接运行打包脚本。
• 全量清理所有层级的缓存
  缓存残留是这类问题的最高发原因，按顺序清理：
  1. 删除项目内的构建产物目录：dist/、out/、release/、.webpack/（electron-forge默认构建缓存目录）
  2. 清理包管理器缓存：npm执行npm cache clean --force，yarn执行yarn cache clean，pnpm执行pnpm store prune
  3. 清理Electron应用运行缓存：
     • Windows：删除%APPDATA%路径下和你项目同名的文件夹
     • macOS：删除~/Library/Application Support/路径下和你项目同名的文件夹
     • Linux：删除~/.config/路径下和你项目同名的文件夹
       清理完成后重新安装依赖，先跑生产构建再执行打包。
• 校验主进程的生产环境加载路径配置
  调试态下Electron会加载ng serve启动的本地开发服务（默认地址http://localhost:4200），和本地文件无关，但生产环境需要加载编译后的静态文件，很多人路径配置错误会导致始终加载旧文件。检查主进程中窗口加载逻辑，参考正确配置：

  const path = require('path');
  const { app } = require('electron');
  const isDev = !app.isPackaged;
  
  // 窗口创建后执行加载逻辑
  if (isDev) {
    mainWindow.loadURL('http://localhost:4200');
    mainWindow.webContents.openDevTools();
  } else {
    // 生产环境使用相对路径加载编译后的index.html，不要写死绝对路径
    mainWindow.loadFile(path.join(__dirname, 'dist/你的Angular项目名/index.html'));
  }
  

  注意路径中的dist目录必须和Angular实际构建输出的目录结构完全一致，不要写错层级。
• 检查打包工具的文件过滤规则
  打开electron-forge/electron-packager的配置项，检查files字段的规则，确保Angular构建输出的dist目录被包含在打包拷贝范围内，没有被ignore规则排除。如果配置中写死了指向历史构建目录的拷贝规则，修正为当前实际的构建输出路径，修改配置后重启终端再执行打包，避免终端缓存旧的环境变量。

快速定位技巧：打包完成后找到输出目录里的app.asar文件，用asar工具解包后查看其中的前端代码文件，如果文件内容还是旧版本，说明问题出在打包前的构建、文件拷贝环节，和Electron运行时无关；如果解包后是最新代码，说明是本地Electron运行缓存没有清理干净。

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