在vue项目中使用electron,生成桌面图标，快速打开系统

最新推荐文章于 2025-10-01 02:39:23 发布

原创最新推荐文章于 2025-10-01 02:39:23 发布 · 2.3k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #electron #前端

该博客详细介绍了如何利用Electron框架创建一个桌面应用，并通过`electron-packager`进行打包，包括设置主文件、配置package.json、添加图标、执行打包命令以及解决可能出现的依赖问题。

步骤一：在项目根目录下新建一下js文件：ele.js

const {app,BrowserWindow,Menu} = require('electron');
//热加载
const reloader = require('electron-reloader');
reloader(module);
Menu.setApplicationMenu(null)
//监听初始化完成得到生命周期
app.on('ready',()=>{
  const mainWindow = new BrowserWindow({
    width:1920,
    height:1080,
  })
  mainWindow.loadURL('前端访问的地址')
});

步骤二：package.json中的代码基础之上添加如下代码

{
  "main": "ele.js",
  "scripts": {
    "electron": "electron .",
    "elebuild": "electron-packager ./ HelloWorld --platform=win32 --arch=x64 --out ./outApp --overwrite --icon=./favicon.ico"
  },
  "devDependencies": {
    "electron": "^20.1.1",
    "electron-packager": "^15.5.2",
    "electron-reloader": "^1.2.3",
  }
}

步骤三：在根目录下添加 favicon.ico 图标作为桌面图标

步骤四：运行打包命令：npm run elebuild

步骤五：在根目录下生成outApp文件夹

步骤六：在 outApp下的HelloWorld-win32-x64下找到HelloWorld.exe，发送桌面快捷方式，双击打开，若app报错，Cannot find module “electron-reloader“的问题，则在outApp\HelloWorld-win32-x64\resources\app路径下打开cmd命令，然后执行npm install --save-dev electron-reloader