步骤

1. git clone https://github.com/electron/electron-quick-start //electron项目clone到本地 npm install安装依赖
2. 已经存在的vue项目 部署到nginx中或者其他服务器中，我的vue项目中用到反向代理
3. 找到main.js文件

 // mainWindow.loadFile('index.html')
 mainWindow.loadURL('http://192.168.1.135:8080')   //换成vue项目部署的ip地址

4. 修改package.json 配置 添加打包命令

{
  "name": "electron-quick-start",
  "version": "1.0.0",
  "description": "A minimal Electron application",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-packager ./ --win --out ./OutApp --arch=x64"
    
  },
  "repository": "https://github.com/electron/electron-quick-start",
  "keywords": [
    "Electron",
    "quick",
    "start",
    "tutorial",
    "demo"
  ],
  "author": "GitHub",
  "license": "CC0-1.0",
  "devDependencies": {
    "electron": "^17.0.1"
  },
  "dependencies": {
    "electron-packager": "^15.4.0"
  }
}

"build": "electron-packager ./ --win --out ./OutApp --arch=x64"
"."后面是打包后的文件夹名称
在后面加上 --asar 打包后 会在 resources文件夹下 生成app.asar 不加就生成如下图所示文件

js.PNG

5. npm install electron-packager
   执行npm run build 时候 会下载对应的electron包 此过程可能会较慢 且容易出错

在打包之后改变调用地址

（注意：此处要求 打包命令后面没加 --asar ,否则打包之后改变不了）

可以修改app文件夹下的 ，main.js文件中的 mainWindow.loadURL("部署ip")来改变相应的调用页面

问题后续 1. 此方只是electron桌面外壳 把页面嵌入electron中 2.网上也有把vue打包之后的dist文件夹中html和static文件直接放到electron根目录下 执行打包 此处有个vue项目接口请求代理问题？
解决办法:在vue项目中 把http://192.168.1.135 这个地址写在static文件夹目录中，在axios请求时，给每个接口都加上http://后台项目部署ip 打包后(不加--asar)可以直接修改部署ip 如果打包中添加--asra 不知道还能不能直接修改？