Electron是一個可以使用前端技術(shù)開發(fā)一個跨平臺桌面應(yīng)用的框架，簡言之就是 一個框架 使用它可以生成桌面應(yīng)用

1、使用vue腳手架生成vue項目

此處選擇vue腳手架2生成項目
vue init webpack test_electron
一系列選擇后生成項目

2、將vue項目打包

npm run build
此時會生成dist目錄 
打包前需要將資源文件路徑改為相對路徑 
此處使用腳手架2 所以在config/build/index.js
 build{} 中更改assetsPublicPath: "./"

3、在項目dist目錄下開始將打包好的vue項目生成桌面應(yīng)用

a、下載electron

首先全局下載 sudo npm install electron -g
檢查下載是否成功以及版本 electron -v

b、在dist目錄下新建文件main.js 和 package.json

const {app, BrowserWindow} =require('electron');//引入electron
let win;
//配置程序運行窗口的大小
let windowConfig = {
  width:800,
  height:600
};
function createWindow(){
//創(chuàng)建一個窗口
  win = new BrowserWindow(windowConfig);
//在窗口內(nèi)要展示的內(nèi)容 index.html 就是打包生成的index.html
  win.loadURL(`file://${__dirname}/index.html`);
//開啟調(diào)試工具
  win.webContents.openDevTools();  
  win.on('close',() => {
    //回收BrowserWindow對象
    win = null;
  });
  win.on('resize',() => {
    win.reload();
  })
}
app.on('ready',createWindow);
app.on('window-all-closed',() => {
  app.quit();
});
app.on('activate',() => {
  if(win == null){
    createWindow();
  }
});

以上是最基本的代碼，復(fù)雜的可以自行設(shè)計，也可以看官方文檔

package.json

{
    "name": "test",
    "productName": "test-electron",
    "author": "jn",
    "version": "1.1.1",
    "main": "main.js",
    "description": "desc",
    "scripts": {
        "distMac": "electron-builder --mac --x64",
        "distWin": "electron-builder --win --x64",
        "postinstall": "electron-builder install-app-deps",
        "dist": "npm run distWin && npm run distMac"
    },
    "build": {
        "electronVersion": "1.8.4",
        "mac": {
            "target": [
                "dmg",
                "zip"
            ]
        },
        "win": {
            "requestedExecutionLevel": "highestAvailable",
            "target": [{
                "target": "nsis",
                "arch": [
                    "x64"
                ]
            }]
        },
        "appId": "demo",
        "artifactName": "demo-${version}-${arch}.${ext}",
        "nsis": {
            "artifactName": "demo-${version}-${arch}.${ext}"
        },
        "extraResources": [{
            "from": "./static/xxxx/",
            "to": "app-server",
            "filter": [
                "**/*"
            ]
        }],
        "publish": [{
            "provider": "generic",
            "url": "http://xxxxx/download/"
        }]
    },
    "dependencies": {
        "core-js": "^2.4.1",
        "electron-packager": "^12.1.0"
    },
    "devDependencied": {
        "electron-builder": "^22.9.1",
        "electron-updater": "^2.22.1"
    }
}

package.json更多配置可查看官方文檔
https://www.electron.build/configuration/configuration

c、使用electron測試

控制臺輸入electron .
此時如果正常顯示 表示成功 接下來只需要將其生成軟件包

4、全局下載electron-builder

sudo npm install electron-builder -g
sudo npm install electron-package -g

5、執(zhí)行打包命令

electron-builder
此時生成exe包

以上只是描述基本簡單使用
生成mac下的包 需要額外配置
需自行百度