前端Web打包成可执行程序

工作需要用到了这个技术，这里记录一下，实现过程：

首先安装打包环境：

第一步，安装Nodejs;（nodejs的官网链接：https://nodejs.org/zh-cn/，选择你想要的版本）

安装过程可参考这篇文章：（不参考安装过程，直接默认安装也没问题）

https://segmentfault.com/a/1190000023390756

第二步，安装electron；

win+R打开命令行，然后输入：npm install electron -g，点击回车，需要等待一段时间

 然后，找到你的前端项目，新建立两个文件：main.js、package.json

main.js中输入一下内容：

// main.js
const {app, BrowserWindow} = require('electron')
const path = require('path')
const 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.
let win

function createWindow () {
  // Create the browser window.
  win = new BrowserWindow({ 800, height: 600})

  // and load the index.html of the app.
  win.loadURL(url.format({
    pathname: path.join(__dirname, 'mian.html'),// 此处的html为你自己的项目的主页面的名称
    protocol: 'file:',
    slashes: true
  }))

  // 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 delete the corresponding element.
    win = null
  })
}

// 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', 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.

package.json

{
  "name": "app",
  "version": "0.1.0",
  "main": "main.js"// 此处的main.js就是上文中的那个文件，使用时请将这个注释删掉
}

第三步，完成上一步的工作之后，打开命令行，将路径切换到当前项目的主目录下，

 这是我的路径，建议使用全英文路径，不确定中文路径是否会有影响。

第四步：在当前的命令行中输入：

npm install electron-packager -g

安装打包工具；

安装过程需要持续一段时间，休息一下。

第五步：在当前的命令行中输入：

electron-packager . app --win --out Exe --arch=x64 --electron-version 11.1.1 --overwrite --ignore=node_modules

electron-packager . 可执行文件的文件名 --win --out 打包成的文件夹名 --arch=x64位还是32位 --electron-version 版本号 --overwrite --ignore=node_modules

 注意：--electron-version 版本号，这个版本号就是你之前安装的那个版本号；

 打包过程需要持续一段时间，等一会儿。

最终会在当前文件夹下输出一个新的目录：

进入这个路径，找到生成的Exe文件，这个就是web工程打包出来的可执行文件。

 

注意：这个可执行文件的正常运行依赖于resources目录下的文件。

实现过程参考了：

https://blog.csdn.net/a727911438/article/details/70834467

https://segmentfault.com/a/1190000023390756 

另外：下次打包的时候可以直接拷贝当前项目下的main.js以及package.json，稍作修改即可使用，打包过程重复上述步骤即可。