后端的java项目好像是前后端不分离的那种，前端基础环境需要node和html" class="superseo">npm。
① 进入需要打包的项目文件夹中，打开cmd进入该目录。
快捷键 win+r 输入cmd 进入默认在c盘目录 输入 d: 进入d盘 再输入dir查看目录文件 cd文件名进入。
② npm init
项目中会多出一个package.json文件，以下是默认内容：
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "Hello World!",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "Jane Doe",
"license": "MIT",
"devDependencies": {
"electron": "^18.0.4"
}
}③ 在根目录下新建main.js,以下是默认内容：
在根目录新建index.html（理解为入口文件）内容如下：
const { app, BrowserWindow } = require('electron')
function createWindow () {
// 创建浏览器窗口
const win = new BrowserWindow({
width: 800,
height: 600,
resizable: false, //禁止改变主窗口尺寸
// frame:false, //去掉边框和工具栏 去掉之后就不能拖拽窗口,需要自己写
maximizable: false, //禁止最大化
webPreferences: {
nodeIntegration: true
}
})
// 这里是配置的入口文件，如果需要改变入口文件改这里就可以 为相对路径
win.loadFile('index.html')
// 打开开发者工具
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()
}
})
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
<meta http-equiv="Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<meta http-equiv="X-Content-Security-Policy" content="default-src 'self'; script-src 'self'">
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
We are using Node.js <span id="node-version"></span>,
Chromium <span id="chrome-version"></span>,
and Electron <span id="electron-version"></span>.
</body>
</html>④ 开始安装 electron
npm install --save-dev electron
这里遇到一个问题 如图：
![在这里插入图片描述]()
npm install 出错read ECONNRESET
原因可能是淘宝镜像挂了，换回以前的镜像试试
获取当前镜像：npm config get registry
使用`npm config set registry http://registry.npmjs.org/`将https://registry.npm.taobao.org/ 替换成了 http://registry.npmjs.org/
如果还不行，继续报错就移步看这篇文章可以解决[关于electron报read ECONNRESET解决方案]()
⑤ 需要测试则执行 npm start
⑥ 打包需要安装 electron-packager
```javascript
npm install electron-packager -g⑦ 需要配置package 打包的script 如下：
"scripts": {
"start": "electron .",
"package":"electron-packager . needle-server --platform=win32 --arch=x64 --out=./out --asar --app-version=1.0.0 --overwrite --ignore=node_modules"
},⑧ 执行命令npm run package 输出文件在 /out 文件里
这个就是我们需要的exe文件。
——————————————————————————————————
还没完
我们只是通过electron-packager，可以将electron应用打包成可执行exe，我们还需要使用electron-winstaller将应用打包成exe安装程序；electron-squirrel-startup安装程序时生成快捷方式；
⑨ 安装依赖
npm install electron-packager --save-dev
npm install electron-squirrel-startup --save⑩ 新建一个打包需要的build.js文件 【放到根目录下，和mian.js同级】内容如下：
var electronInstaller = require('electron-winstaller');
var path = require("path");
resultPromise = electronInstaller.createWindowsInstaller({
appDirectory: path.join('./out/needle-server-win32-x64'), //刚才生成打包文件的路径
outputDirectory: path.join('./out/installer64'), //输出路径
authors: 'Joy', // 作者名称
exe: 'needle-server.exe', //在appDirectory寻找exe的名字
noMsi: true, //不需要mis![这里写图片描述]()
});
resultPromise.then(() => console.log("It worked!"), (e) => console.log(`No dice: ${e.message}`));OK 现在开始验证：
npm run package命令执行成功后生成 needle-server-win32-x64
node build.js命令执行成功后生成 installer64
—————————————————————————————————————
到此结束！！