标签：exe -- app js electron packager 打包

electron打包成exe的步骤如下

Electron 是由 Github开发的开源框架，它允许开发者使用Web技术构建跨平台的桌面应用。electron是通过将Chromium和Node.js合并到同一个运行时环境中，用html，css，JavaScript来构建跨平台桌面应用的一个开源库，并将其打包为Mac，Windows和linux系统下的应用来实现这一目的。

Electron = Chromium + Node.js + Native API

Chromium : 为Electron提供了强大的UI能力，可以不考虑兼容性的情况下，利用强大的Web生态来开发界面。
Node.js ：让Electron有了底层的操作能力，比如文件的读写，甚至是集成C++等等操作，并可以使用大量开源的npm包来完成开发需求。
Native API ： Native API让Electron有了跨平台和桌面端的原生能力，比如说它有统一的原生界面，窗口、托盘这些。

基于HTML5的跨平台技术比较出名的有 PhoneGap、Cordova，常常用于开发webapp

Egret、Cocos-creator、Unity等，常用于开发游戏；

基于node的nw.js，用于开发桌面应用；

Electron，一款比nw.js还强大的用网页技术来开发桌面应用的神器。

准备工作：

1、全局安装打包工具 electron-packager
要求：Electron Packager require Node >=10.12.0
2、打包前为当前app制作icon：icon.ico，256*256。制作好放入app根目录。
electron-packager打包：electron-packager打包有两种方式，一是直接在命令行编辑命令，直接进行打包。另一种是在package.json里编辑package，执行npm run-script package。

此文是直接在命令行打包

electron打包成exe的步骤如下

1.安装node.js

Node.js 中文网

2.全局安装electron-packager打包工具

# 慢的话就配置淘宝镜像，或者使用cnpm安装
npm install electron-packager -g

3.创建目录

找到你前端页面的文件夹，package.json、main.js、index.html三个文件（当然也可以npm init创建），这个index.html就是你的网页首页。

项目结构
├── package.json
├── main.js
└── index.html

（1）package.json内容

{
  "name": "app-name",
  "version": "0.1.0",
  "main": "main.js",
  "dependencies": {
    "electron-packager": "^12.2.0"
  }
}

（2）main.js内容

var  {app, BrowserWindow} = require('electron');
var path = require('path');
var url = require('url');
// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var win;
function createWindow () {
    // Create the browser window.
    win = new BrowserWindow({width: 1080, height: 1920,frame:false});
    win.setFullScreen(true);
 
    // and load the index.html of the app.
    win.loadURL(url.format({
        pathname: path.join(__dirname, 'index.html'),
        protocol: 'file:',
        slashes: true
    }));
 
    // win.once('ready-to-show', () => {
    //     win.show()
    // })
 
    // Open the DevTools.
    // win.webContents.openDevTools()
    // Emitted when the window is closed.
    win.on('closed', () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should devare the corresponding element.
        win = null
});
    // require('electron').webFrame.setZoomLevelLimits(1,1);
}
// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on('ready', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    createWindow();
});
// Quit when all windows are closed.
app.on('window-all-closed', () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== 'darwin') {
    app.quit()
}
});
app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (win === null) {
    createWindow()
}
})
// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

4.打开当前目录命令行

打包方式一：命令行直接打包

注意：打包会去下载electron-vX.Y.Z-win32-x64.zip压缩包，下载太慢的话就配置npm的淘宝镜像
安装electron时无法下载electron压缩包

 electron-packager ./ appname --platform=win32 --out=release --arch=ia32 --electron-version=1.8.4 --overwrite

资料如下：执行命令electron-packager --help或者访问官网查看所有可配置参数。

参数说明：
 appname ：你将要生成的exe文件的名称
–platform=win32：确定了你要构建哪个平台的应用（Windows、Mac 还是 Linux）,可取的值有 darwin, linux, mas, win32
–arch=x64：决定了使用 x86 （ia32）还是 x64（x64），还是两个架构都用
–icon=自定义.ico：自定义设置应用图标
–out=./out：指定打包文件输出的文件夹位置,当前指定的为项目目录下的release文件夹
–asar：该参数可以不加，如果加上，打包之后应用的源码会以.asar格式存在
–app-version=1.0.0：生成应用的版本号
–overwrite：覆盖原有的build,让新生成的包覆盖原来的包
–ignore=node_modules：如果加上该参数，项目里node_modules模块不会被打包进去
–electron-version 8.2.1：指定当前要构建的electron的电子版本（不带"v"）,需要和当前的版本一致,具体可以在 package.json文件中查看,可以不加该参数，如果不一致，会自动下载。

还可以使用asar对resources文件进行简单加密

汇总：
electron-packager . helloWorld --platform=win32 --arch=x64 --icon=icon.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules --electron-version 8.2.1

打包方式二：在package.json文件中配置

在package.json文件中配置参数打包

命令较长，每次打包都需要输入很麻烦，可以把命令配置到package.json文件中scripts属性中：

"scripts": {
    "package":"electron-packager . HelloWorld --platform=win32 --arch=x64 --icon=computer.ico --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"

或者

"scripts": {
  "start": "electron .",
  "packager": "electron-packager . fukaiitapp --out fukaiitapp --arch=x64 --overwrite --ignore=node_modules"
},

然后在命令行中输入：npm run packager

通过以上两种方式都可进行打包，选择一种即可。

出现以下信息，表示打包完成，并且在根目录下多出out文件夹。(多出自定义名称的文件夹，此处是out文件夹)

打开map.exe即可运行

resourse文件夹存放源代码，若不想人查看源代码，可在打包时加上asar，用来对resources文件进行简单加密

注意事项：

1、采用通用方法引入jQuery并不报错，但是不起任何作用，具体表现为"$"符号无法选中dom，原因是node环境中某些变量与jQuery中产生冲突。解决方法：

（1）引入js时，代码如下：

<!-- Insert this line above script imports  -->
<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>
 
<!-- normal script imports etc  -->
<script src="scripts/jquery.min.js"></script>    
<script src="scripts/vendor.js"></script>    
 
<!-- Insert this line after script imports -->
<script>if (window.module) module = window.module;</script>

（2）尽量不要有多个main.js，否则打包之后js可能失效，因为配置文件main.js与之冲突

2、打开APP之后发现白屏，有可能报错啦，但是有没有办法调试。调试的方法有很多种，具一种最简单的，就是在main.js中添加这个代码，这个一定要添加在ready这个方法之前。它会监听8315这个端口，然后打开可以看到调试器信息。

const app = require('electron').app;
app.commandLine.appendSwitch('remote-debugging-port', '8315');
app.commandLine.appendSwitch('host-rules', 'MAP * 127.0.0.1');
 
app.on('ready', function() {
  // Your code here
});

3.尽量不要在win10 C盘中打包，可能会有问题

原文地址：https://blog.csdn.net/qq_46664185/article/details/122437700

标签：exe,--,app,js,electron,packager,打包
From： https://www.cnblogs.com/hhddd-1024/p/16706302.html

electron打包成exe