准备工作：

1.有现成的vue项目。

2.将vue项目打包生成发布文件，例如如下结果：

 

 3.安装Electron

$ npm install electron -g

这里我使用的是全局安装，通过 electron -v 命令查看electron 是否安装成功

4.创建主程序的入口（main.js），该文件和vue打包生成的文件在同一目录中

 1 const {app, BrowserWindow} =require('electron');//引入electron
 2 let win;
 3 let windowConfig = {
 4   width:800,
 5   height:600
 6 };//窗口配置程序运行窗口的大小
 7 function createWindow(){
 8   win = new BrowserWindow(windowConfig);//创建一个窗口
 9   win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
10   //win.webContents.openDevTools();  //开启调试工具
11   win.on('close',() => {
12     //回收BrowserWindow对象
13     win = null;
14   });
15   win.on('resize',() => {
16     win.reload();
17   })
18 }
19 app.on('ready',createWindow);
20 app.on('window-all-closed',() => {
21   app.quit();
22 });
23 app.on('activate',() => {
24   if(win == null){
25     createWindow();
26   }
27 });

5.配置 package.json文件，该文件和vue打包生成的文件在同一目录中

 1 {
 2     "name": "demo",
 3     "productName": "项目名称",
 4     "author": "wh",
 5     "version": "1.0.0",
 6     "main": "main.js",
 7     "description": "Web三维",
 8     "scripts": {
 9         "pack": "electron-builder --dir",
10         "dist": "electron-builder",
11         "postinstall": "electron-builder install-app-deps"
12     },
13     "build": {
14         "electronVersion": "1.8.4",
15         "win": {
16             "requestedExecutionLevel": "highestAvailable",
17             "target": [
18                 {
19                     "target": "nsis",
20                     "arch": [
21                         "x64"
22                     ]
23                 }
24             ]
25         },
26         "appId": "Web3d",
27         "artifactName": "demo-${version}-${arch}.${ext}",
28         "nsis": {
29             "artifactName": "demo-${version}-${arch}.${ext}"
30         },
31         "extraResources": [
32             {
33                 "from": "./static/assets/",
34                 "to": "app-server",
35                 "filter": [
36                     "**/*"
37                 ]
38             }
39         ]
40     },
41     "dependencies": {
42         "core-js": "^2.4.1",
43         "electron-packager": "^12.1.0",
44         "electron-updater": "^4.2.0"
45     }
46 }

生成桌面应用程序

1.进入vue打包后的文件目录，如dist文件下，shift+右键 打开命令行窗口，输入“ electron . ”   命令检测前期准备工作是否完美无瑕。成功则会自动运行你的项目。

2.安装electron-builder和electron-package,这里我也都是全局安装

$ npm install electron-builder -g

$ npm install electron-package -g

3.执行“electron-bulider“命令生成exe桌面应用程序。

 

 该文件内容在dist/dist目录下。

过程大概是这样的，但实践可能并不是那么一帆风顺，当然，如果遇到报错，根据错误提示也是能轻易解决问题的。