electron打包前端为Windows、Linux、Mac可执行文件详细教程

1、检查是否安装了node

输入node -v和npm -v 查看node和npm是否安装好，Windows下没有安装好的参考教程《Windows下NodeJS安装与npm环境变量配置》，如果是Linux项目参考教程《linux安装nodejs》。

安装完成后，可以把镜像换成淘宝的，之后下载一些东西速度会快一点，在命令行输入npm install cnpm -g --registry=https://registry.npm.taobao.org，全局安装cnpm。之后下载慢的话直接用cnpm install就可以了。

2、初始化项目&配置文件

以下教程以Windows为例，Linux和Mac基本类似。

本教程新建了一个HelloWorld的文件夹，在文件夹下面创建了一个index.html的网页文件。

在项目文件中打开cmd窗口，输入npm init，引导语都直接回车，先都默认，然后会在项目文件下面生成一个package.json文件。

打开package.json文件，将name修改为项目名，将main里面的值改为main.js，然后对scripts进行如下配置。

  "scripts": {
    "start": "electron .",
    "package-win": "electron-packager . HelloWorld --platform=win32 --electron-version=10.0.0 --arch=x64 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --asar --app-version=0.0.0 --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.ico",
    "package-linux": "electron-packager . HelloWorld --platform=linux --electron-version=10.0.0 -no-sandbox --arch=x64 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --asar --app-version=0.0.0 --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.png",
    "package-mac": "electron-packager . HelloWorld --platform=darwin --electron-version=10.0.0 --arch=x64 --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --asar --app-version=0.0.0 --build-version=0.0.0 --out=HelloWorld --overwrite --no-package-manager --ignore='(.git)' --icon=assets/img/logo.ico"
  },

对scripts设置了四个参数，一个是不打包直接启动的start，其他三个参数是三个不同平台项目的打包。在运行命令的时候，如果是直接启动，就运行npm start，如果是打包，就运行npm run package-win自己选择对应的平台。

第一行第二个参数HelloWorld表示打包后文应用程序的名称

paltform参数可以设置为win32，代表打包为Windows 系统的可执行文件，打包为.exe；设置为linux，代表打包为Linux系统的文件，但在Linux系统下面无法直接运行，需要进行后期的配置。设置为darwin，打包为Mac下面的应用程序。out参数为输出文件夹的名字，icon参数读取文件项目的logo图标，在项目中图标放在assets/img文件夹下面。然后在参数里面把镜像换成了淘宝镜像，这样打包速度会快很多，不然会等到猴年马月。

3、新建main.js

配置好上面的文件后，在项目的根目录下面新建一个main.js文件,需要写入的内容如下：

const {
    app,
    Menu,
    BrowserWindow
} = require('electron')

function createWindow() {
    // 创建浏览器窗口
    const win = new BrowserWindow({
        width: 750,
        height: 650,
        webPreferences: {
            nodeIntegration: true
        }
    })
    // 并且为你的应用加载index.html
    win.loadFile('index.html')

    Menu.setApplicationMenu(null) //取消菜单栏
    // 打开开发者工具
    // win.webContents.openDevTools()
}

// Electron会在初始化完成并且准备好创建浏览器窗口时调用这个方法
// 部分 API 在 ready 事件触发后才能使用。
app.whenReady().then(createWindow)

//当所有窗口都被关闭后退出
app.on('window-all-closed', () => {
    // 在 macOS 上，除非用户用 Cmd + Q 确定地退出，
    // 否则绝大部分应用及其菜单栏会保持激活。
    if (process.platform !== 'darwin') {
        app.quit()
    }
})

app.on('activate', () => {
    // 在macOS上，当单击dock图标并且没有其他窗口打开时，
    // 通常在应用程序中重新创建一个窗口。
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow()
    }
})

4、安装electron插件

把上面所有的都配置好之后，现在就可以开始安装相应的插件了。在项目根目录中打开cmd窗口，只在项目中安装electron，输入命令npm install --save-dev electron。

上面这个插件是可以将网页用于应用程序窗口打开的，打包的话还需要另外一个插件electron-packager，还是在当前命令窗口下，输入npm install --save-dev electron-packager。

5、打包运行

在打包之前可以先测试运行是否代码有错，在当前命令行输入npm start，

然后就会弹出一个窗口，这就是打包后你需要的应用程序界面。

如果出现了想要的界面，就一切OK了，但万一发现没有达到想要的效果，估计是报错了，那么怎么打开控制台呢。在上面的main.js文件里面，我把打开开发者工具那行代码给注释了，取消掉就可以看见控制台了，知道自己那些报错了。

然后就开始打包吧。在命令行窗口运行npm run package-win，等一下就可以在当前目录下面看见一个新的文件夹，就去找到exe文件就可以双击运行了。

如果要在Linux下面运行，在命令行窗口运行npm run package-linux，生成的文件和Windows下略有不同，但可执行文件名字都是一样的，都叫做HelloWorld，找到整个文件，在当前目录打开终端，如是普通用户的话就先给权限chmod +x ./HelloWorld，然后再运行./HelloWorld。如果弹出窗口，证明你成功了，但我在搞整个玩意的过程中，试了半天没成功，控制台都是报这样的错误

[5301:1201/103632.560608:FATAL:electron_main_delegate.cc(264)] Running as root without --no-sandbox is not supported. See https://crbug.com/638180.追踪与中断点陷阱 (核心已转储)

后来找到一篇博客，说是在后面加上--no-sandbox就可以，然后我就试了./HelloWorld --no-sandbox，果不其然，成功。

Mac下面的话小弟没测，因为qiu，各位大佬自行检测，有什么问题可以评论交流讨论。

6、其他的一些问题

上面的教程就实现了所有的打包，这个点是解决一些我在打包过程中遇到的一些问题。

第一个是打包过程中，如果引用了其他的一些js库或者文件，就比如引用jQuery的话，会在控制台报$不是一个功能，这是因为在打包的过程中路径出现了问题。只需要在入口html文件最开始的地方加上<script>if (typeof module === 'object') {window.module = module; module = undefined;}</script>这行代码就可以解决这个问题。

7、编译/反编译app.asar

打包后，electron将数据文件变成了asar格式的压缩文件，需要用node进行反编译，才可以得到所有的数据文件。在打包好的目录下面找到resources这个文件夹，打开就可以发现app.asar这个文件。

在resources目录下面打开cmd窗口，运行命令npm install -g asar，会在node全局安装使用。

然后执行命令asar extract app.asar ./app，就会把app.asar反编译到当前目录下面的app文件夹下面，然后打开app文件夹，找到data文件夹，下面就是后端返回的两个数据，head_data.js和ssh_data.js，如果后端需要替换数据，请按照相同的格式进行替换。

假如替换好数据后，就需要对app这个文件夹重新编译为app.asar，还是在resources文件夹下面运行cmd窗口，然后运行命令asar pack app app.asar就可以把之前的app.asar文件给替换，达到更换数据的效果。

**注意：**如果后端需要对数据文件进行更改，不需要每次都进行反编译，手动反编译一次，然后让后端替换data数据，执行编译这一步操作即可。

标签：npm,asar,Windows,app,Mac,--,electron,打包
来源： https://blog.csdn.net/qq_42376617/article/details/110424719