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

步骤一：在项目根目录下新建一下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