1.在根目录创建一个js文件，里面配置如下，下面的包按照给的下载

const express = require('express');
const http = require('http');
const path = require('path');
const { app, BrowserWindow } = require('electron');
const isDev = require('electron-is-dev')
const server = express();
server.use(express.static(path.join(__dirname, 'dist')));
http.createServer(server).listen(3000, '127.0.0.1', () => {
  console.log('本地服务启动：http://127.0.0.1:3000');
});
function createWindow() {
  const win = new BrowserWindow({
    width: 1000,
    height: 700,
    webPreferences: {
      javascript: true,
      nodeIntegration: true,
      contextIsolation: false
    }
  });
  // 加载 HTTP 服务的页面（http:// 协议，无 file:// 限制）
  win.loadURL('http://127.0.0.1:3000');
  win.webContents.openDevTools();
  // 打开开发者工具（开发环境）
  if (isDev) {
    win.webContents.openDevTools()
  }
}
// 应用就绪后创建窗口
app.whenReady().then(createWindow)
// 关闭所有窗口时退出应用
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})
app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

2.Package.json里面的配置如下

3.下载需要的包，

npm install electron electron-builder --save-dev，npm install --save-dev electron@37.4.0 

下载时如有报错
设置 Electron 镜像为淘宝源并创建.cnpm文件设置镜像源就能下载了 ：

npm config set electron_mirror https://npmmirror.com/mirrors/electron/

4.运行打包命令时，先运行

npm run build

打包成dist文件，再运行

npm run electron:build

进行打包，打包过程中如果报错，先用管理员运行vscode,然后下载一个7-zip，因为打包运行时需要7-zip来解压文件

5.打包完后myapp829 Setup0.1.0.exe就是桌面应用，win-unpacked文件夹里面是已经下载好的，可以直接打开运行看看打包的应用

6.这是打包好并运行的桌面应用

代码部分
软件下载

文章作者：程恒烽

最后更新于 2025-08-29 15:30:43 并被添加「」标签，已有 27 位网友阅读过。

本站使用「署名 4.0 国际」创作共享协议，可自由转载、引用，但需署名作者且注明文章出处