1. 下载并安装Node.js,下载连接https://nodejs.org/en/

2.检查是否安装成功

输入 “node -v” ,回车,显示Node版本;再输入 “npm -v” ,回车,如果正常显示npm版本,说明你安装成功了

nodejs express项目如何编译 nodejs编译成exe_json

3.安装Electron环境。

新建一个文件夹1,在文件夹1中再新建一个文件夹2 ,打开文件夹2,“打开Windows PowerShell”。输入初始化命令,“npm init”,回车,输入yes。entry point修改为main.js,其他选项直接回车默认就好了,最后会出现Is this OK?输入yes,回车。

nodejs express项目如何编译 nodejs编译成exe_PowerShell_02


回到文件夹,就会多一个package.json文件。

nodejs express项目如何编译 nodejs编译成exe_javascript_03


打开package.json文件,将"scripts"里的内容改为"start": “electron .”。如图:

nodejs express项目如何编译 nodejs编译成exe_PowerShell_04

安装Electron,在PowerShell中输入命令"npm install electron --save-dev --verbose",回车,开始安装。

nodejs express项目如何编译 nodejs编译成exe_js_05

安装完成后,文件夹中会多出一个文件夹node_modules。注:如果缺package-lock.json这个文件,是因为PowerShell命令没有运行完强制退出导致

nodejs express项目如何编译 nodejs编译成exe_PowerShell_06


然后新建一个main.js文件,文件内容可以根据自己的需求修改。

const electron = require('electron');
const app = electron.app;

const path = require('path');
const url = require('url');

const BrowserWindow = electron.BrowserWindow;

// 初始化并准备创建主窗口
app.on('ready', function() {
	// 创建一个窗口
	mainWindow = new BrowserWindow({
		// width: 800,
		// height: 600,
		minimizable: true,//最小化
		maximizable: true,//最大化
		closable: true,
		movable: true,
		frame: true,//边框
    fullscreen: false,//全屏
    titleBarStyle: 'hidden',
    autoHideMenuBar: true,
    //图标
    icon: path.join(__dirname, '/WebContent/favicon.ico')
  });

  // 最大化窗口
  mainWindow.maximize();

	// 载入应用的index.html
	mainWindow.loadURL(url.format({
		pathname: path.join(__dirname, '/WebContent/index.html'),
		protocol: 'file:',
		slashes: true
  }));

	// 窗口关闭时触发
	mainWindow.on('closed', function() {
		// 想要取消窗口对象的引用, 如果你的应用支持多窗口,你需要将所有的窗口对象存储到一个数组中,然后在这里删除想对应的元素
		mainWindow = null
  });

  // 开发者窗口
  // mainWindow.webContents.openDevTools()
});

保存文件后文件夹如图所示:

nodejs express项目如何编译 nodejs编译成exe_json_07


安装electron-package。打开Windows PowerShell,输入“npm install electron-packager -g”,回车。如图即为安装成功。

nodejs express项目如何编译 nodejs编译成exe_json_08


修改package.json。在"scripts"中加入"packager"配置:

"scripts": {
   "start": "electron .",
    "packager":"electron-packager ./ ISCS --platform=win32 --arch=x64 --electron-version=1.8.4 --out=../ceshi/exe版 --overwrite"
  },

./表示当前路径
ISCS :exe应用的名称
platform: 打包平台 darwin, linux, mas, win32或者选择all
arch: 可选 ia32, x64, armv7l, arm64或者选择all
electron-version: electron的版本()
out:生成的exe保存目录
overwrite:使用了这个参数,每次打包就不用把原来exe删除,可直接覆盖了。

修改会保存文件。
将写好的web项目文件都拷贝到家文件夹2中,如图:

nodejs express项目如何编译 nodejs编译成exe_PowerShell_09


打开Windows PowerShell,输入“npm run-script packager”,回车。

nodejs express项目如何编译 nodejs编译成exe_javascript_10


返回文件夹上级目录,找到exe保存目录。

nodejs express项目如何编译 nodejs编译成exe_PowerShell_11


nodejs express项目如何编译 nodejs编译成exe_js_12


找到你命名的exe,双击打开,就可以看到生成的exe效果了。

nodejs express项目如何编译 nodejs编译成exe_js_13


如果你的程序中有写js或者jquery,会发现写的有些事件失效了,比如按钮的点击事件。解决方法:在页面中加入下面代码就可以正常运行。

<script>
			window.nodeRequire = require;
			delete window.require;
			delete window.exports;
			delete window.module;
		</script>