electron打包angualr项目编程exe程序，resources/app目录生成为目录不是app.asar

一、先创建一个angualr项目

　　1.全局安装Angular CLI：npm install -g @angular/cli

　　2.创建一个项目：ng new my-project

　　3.可以启动下项目查看项目：npm run start

　　4.可以参考官网创建项目，如下图所示：

　　

 

二、在刚刚安装好的angular项目中安装electron，注意：npm官方镜像安装electron会比较慢，切换成国内淘宝镜像比较快

　　1.安装electron：npm install --save-dev electron

　　2.安装electron打包工具：npm install --save-dev @electron-forge/cli

　　3.使用其"import"命令设置 Forge 的脚手架：npx electron-forge import

　　4.可以参考官网安装，如下图所示：

　　

　　

 

 

　　5.electron安装后，会把angular的启动命令更改，如下图修改：

　　

 

三、安装好angular和electron后需要做一些配置：

　　1.修改项目根目录下的package.json，需要新增一些配置

　　

 　　2.修改forge.config.js，只留下修改后的

　　

 　　3.在根目录下新建custom-packager.js，具体内容如下，直接复制

　　　　const packager = require('electron-packager');

　　　　// 配置选项

　　　　const options = {

　　　　　　dir: '.', // 项目目录

　　　　　　out: 'out', // 输出目录

　　　　　　overwrite: true, // 覆盖输出目录

　　　　　　asar: false // 不使用 asar 打包

　　　　};

　　　　// 调用 packager

　　　　packager(options).then(appPaths => {

　　　　　　console.log(`应用已打包到：${appPaths}`);

　　　　})

　　　　.catch(err => {

　　　　　　console.error('打包时出错：', err);

　　　　});

　　4.在根目录下新建main.js　，具体内容如下

　　const {app,BrowserWindow, ipcMain,globalShortcut} = require('electron');
　　const path = require('node:path')
　　const url = require('url');
　　const packager = require('electron-packager');
　　const createWindow=()=>{
　　　　const win=new BrowserWindow({
　　　　　　webPreferences: {
　　　　　　　　nodeIntegration: true,//打开浏览器调试
　　　　　　}

　　　　})
　　　　win.maximize();//窗口默认最大化
　　　　//dist/browser/index.html对应打包后的地址
　　　　win.loadURL(url.format({
　　　　　　pathname: path.join(__dirname, 'dist/browser/index.html'),
　　　　　　protocol: 'file:',
　　　　　　slashes: true
　　　　}))
　　}

　　function handleSetTitle(event,title){
　　　　const webContents=event.sender;
　　　　const win=BrowserWindow.fromWebContents(webContents)
　　　　win.setTitle(title)
　　}

　　app.whenReady().then(()=>{
　　　　ipcMain.handle('ping', () => 'pong')
　　　　ipcMain.on('set-title',handleSetTitle)
　　　　createWindow()
　　　　app.on('active',()=>{
　　　　　　if(BrowserWindow.getAllWindows().length === 0){
　　　　　　　　createWindow()
　　　　　　}
　　　　})
　　　　app.on('window-all-closed',()=>{
　　　　　　if(process.platform !== 'darwin'){
　　　　　　　　app.quit();
　　　　　　}
　　　　})
　　})

　　5.打包angular前需要将根目录下的angular.json的打包输出路径改下，这个路径和上一步骤的红色字体的路径相对应

　　

　　6.执行angular的打包命令：npm run build，打包后的路径对应4的路径

　　

　　7.修改package.json里的electron的打包命令，修改后如图所示：

　　

　　8.执行electron的打包，前面先打包好了angular，再将打包后的angular执行electron打包，执行打包命令：npm run package，如果遇到Error: Cannot find module 'electron-packager'，安装下electron-packager，npm i electron-packager --save

　　

 　　9.打包后的resources/app是一个目录了，就不是app.asar，因为先打包了一遍angular，又打包了一次electron，所以相当于将项目打包两次，内容大小就会变为原来2倍

　　10.app目录下可以删除一些没用的文件，比如src目录和node_modules目录，也可以在打包的时候指定打包文件。