, with the rise of HTML5 and the unification of JavaScript, there is a growing technology called "cross platform". Why is it so hot? Because software developers only need to write programs one time, they can run on platforms like Windows, Linux, Mac, IOS and Android, which greatly reduces the workload of programmers, and enables the company's products to read and iterate quickly. Once cross platform technology is not optimistic, now with the development of mobile phones, computer hardware and rapid development. All this, almost driven by HTML5 technology, of course, the language of JavaScript, is the biggest player.

based on HTML5 cross platform technology has more well-known PhoneGap, Cordova, webapp and Egret are often used to develop; Cocos-creator, Unity, etc., are commonly used in game development; and Node.js based on nw.js, for the development of desktop applications, and a Electron. A powerful than nw.js also use web technology to develop desktop application artifact.

actually, the above are nonsense, now enter the theme: how to use Electron to package the web into a exe executable file!


1, assuming you have installed and configured node.js (Global installation)
2, you have installed electron NPM
3 (Global installation), you have written the front page (HTML, CSS, JavaScript, or on the front frame of these written "
, 4) the above three points cannot read, go to Baidu...


1、找到你的前端网页项目文件夹,新建 package.json、main.js、index.html 三个文件(注:其中的 index.html 是你的网页首页)


 ├── package.json ├── main.js └── index.html

2、在 package.json 中添加如下内容

 {  "name" : "app-name",  "version" : "0.1.0",  "main" : "main.js" }

3、在 main.js 中添加下面的内容,这个 main.js 文件就是上面 package.json 中的 "main"键 的值,所以可根据需要修改

 const {app, BrowserWindow} = require('electron') const path = require('path') const url = require('url') // Keep a glo BAL reference of the window object, if you don't, the window will closed automatically when the / / be JavaScript object is garbage collected. let win function createWindow (the browser) {/ / Create window. win = new BrowserWindow ({width: 800, height: 600}) load the index.html of the / and app. win.loadURL (url.format ({pathname: (path.join __dirname,'index.html'), protocol:'file:', slashes: true Open the DevTools.})) / / / / win.webContents.openDevTools / / when the window (Emitted) is closed. win.on ('closed') (=> the window {/ / Dereference object usually you would store windows an array if your / / in 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) when all windows are closed. / Quit app.on ('window-all-closed') (=> macOS it is {/ / On 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') (=> macOS it's common {/ / On to re-create a window in the app when the icon is clicked and / / dock there are no other windows open. if (win = = = null) {}}) (createWindow) this file you can / / In include the rest of your app's specific main process / / code. You C An also put them in separate files and require them here.

4, if your page file name is "index.html", then please in main.js, one of the'index.html'modification for your web page

5, open DOS, CD to your project directory (or directly in your project directory blank where shift+ is the right mouse button, and then click here to open a command window here cannot read, alas, Baidu,


) young in the last step of the DOS npm install electron-packager -g, the input of our global installation package

 NPM install electron-packager artifact 


7 installation package, the artifact in the last step, or DOS, electron-packager app --win --out input presenterTool --arch=x64 --versio. N 1.4.14 --overwrite --ignore=node_modules can start packing

 electron-packager. App --win --out presenterTool presenterTool, "what is the meaning of this command?" The blue part: 

electron-packager. You can modify the executable file name --win --out packaged into a folder name --arch=x64 or 32 --version --overwrite --ignore=node_modules

8, packaged successfully, it will create a new folder, point in, find the EXE file, double-click to see the web page into a desktop application!

is the most simple packaging, as for how to modify the window size, how to add menu bar, how to call the system API that will give you slowly go on Electron.

if you pack is not always successful, feel bored, and extension of the function is not what is required,

Click to enter my Coding Code:

now only needs to copy your web page front-end project to /resources/app/project directory, double-click exe files, that is, you can run your webpage in the way of desktop application.

> concluded the above method is small to the web front page to generate exe introduce the executable file, we want to help, if you have any questions please give me a message, Xiao Bian will reply you timely. Thank you for your support for the home website of the script!

This paper fixed link:http://www.script-home.com/the-method-of-generating-exe-executable-files-by-the-web-front-end-page.html | Script Home | +Copy Link

Article reprint please specify:The method of generating exe executable files by the web front-end page | Script Home

You may also be interested in these articles!