网址打包成桌面.exe

最新推荐文章于 2024-12-29 10:40:26 发布

雪天前端

最新推荐文章于 2024-12-29 10:40:26 发布

阅读量2.4k

点赞数 9

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/qq_43422957/article/details/137426746

本文详细介绍了如何使用Node.js的electron和electron-builder工具，将HTML网页打包成可执行的桌面应用程序，包括初始化项目、安装依赖、编写index.js、配置package.json以及生成.exe安装包的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

01 新建一个文件夹例如myexe，在此目录下打开cmd输入npm init -y初始化：

npm init -y

02 安装依赖 npm install --save-dev electron @electron-forge/cli

npm install --save-dev electron @electron-forge/cli

03 在myexe文件下新建一个index.js，粘贴下面代码到index.js

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    autoHideMenuBar: true,
  })
  // 全屏
  win.maximize()
  // 载入要打包的网页链接
  win.loadURL('https://www.baidu.com/')
}

// 应用程序准备好后加载窗口
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 窗口关闭后退出应用程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

04 修改package.json里面的scripts：{ }里面加入下面这行代码

"start": "electron-forge start",

05 启动执行npm run start，如下就会自动打开该网址生成的桌面程序

到这里已经看到生成的桌面文件，那么如何拿到生成的.exe文件呢

06 安装 npm install --save-dev electron-builder

npm install --save-dev electron-builder

07 在package.json里面的scripts：{ }里面再加入下面这行代码

"build": "electron-builder --win"

在scripts下面复制下面代码：

"build": {
    "productName": "我的应用",
    "directories": {
      "output": "out" 
    },
    "win": {
      "icon": "./ico/logo.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./ico/logo.ico",
      "uninstallerIcon": "./ico/logo.ico",
      "installerHeaderIcon": "./ico/logo.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "我的应用"
    }
  },

08 打包执行 npm run build

npm run build

这个就是exe的安装包，复制到浏览器下载即可

以上打包百度网址为桌面应用的完整源码如下：

package.json源码：

{
  "name": "myexe",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "start": "electron-forge start",
    "build": "electron-builder --win"
  },
  "build": {
    "productName": "我的应用",
    "directories": {
      "output": "out" 
    },
    "win": {
      "icon": "./ico/logo.ico",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64",
            "ia32"
          ]
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "allowElevation": true,
      "allowToChangeInstallationDirectory": true,
      "installerIcon": "./ico/logo.ico",
      "uninstallerIcon": "./ico/logo.ico",
      "installerHeaderIcon": "./ico/logo.ico",
      "createDesktopShortcut": true,
      "createStartMenuShortcut": true,
      "shortcutName": "我的应用"
    }
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@electron-forge/cli": "^7.3.1",
    "electron": "^29.1.6",
    "electron-builder": "^24.13.3"
  }
}

index.js源码：

const { app, BrowserWindow } = require('electron')
const createWindow = () => {
  // 创建浏览器窗口
  const win = new BrowserWindow({
    autoHideMenuBar: true,
  })

  // 全屏
  win.maximize()

  // 载入要打包的网页链接
  win.loadURL('https://www.baidu.com/')
}

// 应用程序准备好后加载窗口
app.whenReady().then(() => {
  createWindow()
  app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

// 窗口关闭后退出应用程序
app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') app.quit()
})

如有帮助，点个赞可否？