手动整合electron和vue

原由

最开始考虑使用的是Vue CLI Plugin Electron Builder，但是最开始在渲染进程调用ipc通讯一直没成功就换了electron-vue，然后发现electron-vue估计是太久没更新了，electron版本还是2.0.18，不支持异步的ipc通讯，又只能切回Vue CLI Plugin Electron Builder，找了不少办法解决了之前的问题，可以调通ipc通讯了，具体方法：https://blog.youkuaiyun.com/qq_40488121/article/details/108128371，然后又发现使用的nightmare的支持electron同时使用的版本eramthgin，它不支持高版本的electron，Vue CLI Plugin Electron Builder支持的最低版本好像是7.0.0，就又只能切换回electron-vue，到了最后业务代码都写完了，最后打包发现electron-vue打包后调用ipc通讯的部分代码错误了，理论上是不应该会出现这个情况的，但是一直没找到相关文档，也一直没又找到解决办法，于是决定自己来整合下electron和vue，在打包

正式开始

首先安装vue环境和vue-cli，这部分网上的教程很多，我就不具体说了，自行百度
然后使用vue来创建vue项目：

vue init webpack projectName

然后进入项目根目录运行npm run dev尝试启动项目

然后访问控制台打印的地址，能出现如下页面就行了

然后修改config/index.js 中的生成路径，既build：assetsPublicPath参数为"./"，如下图：

项目下会多出一个dist的文件夹，里面就你打包好的东西
接下来一切操作都在dist文件夹目录下。
然后安装electron
执行命令npm install electron -g 和 npm install electron
如果是和我一样需要安装特定版本的electron则在electron后面接上@符号并加上需要安装的版本号例如：npm install electron@2.0.18 和npm install electron@2.0.18 -g
如果安装失败可以参考：https://blog.youkuaiyun.com/XieEDeHeiShou/article/details/106628691
安装成功后执行：electron -v 查看一下是否安装成功
如果提示electron 不是内部或外部命令，也不是可运行的程序或批处理文件。查看是否运行了-g命令，是否将node_global配置到环境变量里面
创建主程序的入口（main.js）,及相关配置 package.json
在dist文件夹内创建main.js文件及package.json 文件
文件内容如下：
main.js

const {app, BrowserWindow} =require('electron');//引入electron
let win;
const path = require('path')
let windowConfig = {
  width:800,
  height:600,
  webPreferences:{preload: path.resolve(__dirname, 'electron-preload.js')}
};//窗口配置程序运行窗口的大小
function createWindow(){
  win = new BrowserWindow(windowConfig);//创建一个窗口
  win.loadURL(`file://${__dirname}/index.html`);//在窗口内要展示的内容index.html 就是打包生成的index.html
  win.webContents.openDevTools();  //开启调试工具
  win.on('close',() => {
    //回收BrowserWindow对象
    win = null;
  });
  win.on('resize',() => {
    win.reload();
  })
}
app.on('ready',createWindow);
app.on('loaded',()=>{
  console.log("aaa")
});
app.on('window-all-closed',() => {
  app.quit();
});
app.on('activate',() => {
  if(win == null){
    createWindow();
  }
});

const { ipcMain } = require('electron')
ipcMain.on("ping",function(even,arg){
  console.log(arg)
  even.returnValue = "pong"
})

以上是最基本的代码，更复杂的可以自行设计，也可以看官方文档

package.json

{
  "name": "demo",
  "productName": "demo",
  "author": "作者",
  "version": "1.0.4",
  "main": "main.js",
  "description": "项目描述",
  "scripts": {
    "pack": "electron-builder --dir",
    "dist": "electron-builder",
    "postinstall": "electron-builder install-app-deps"
  },
  "build": {
    "electronVersion": "2.0.18",
    "win": {
      "requestedExecutionLevel": "highestAvailable",
      "target": [
        {
          "target": "nsis",
          "arch": [
            "x64"
          ]
        }
      ]
    },
    "appId": "demo",
    "artifactName": "demo-${version}-${arch}.${ext}",
    "nsis": {
      "artifactName": "demo-${version}-${arch}.${ext}"
    }
  },
  "dependencies": {
    "core-js": "^2.4.1",
    "electron-updater": "^2.22.1"
  },
  "devDependencies": {
    "electron-packager": "^12.1.0",
    "electron-builder": "^20.19.2"
  }
}

package.json更多配置可查看官方文档：https://www.electron.build/configuration/configuration
运行electron .命令，注意有个点。有弹出窗口并正常显示页面为成功了
然后打包
运行npm install
运行npm install electron-packager -g全局安装electron-packager，如需安装特定版本按之前方法执行
运行electron-packager ./ demo --win --out ./outputs 进行打包
打完包后dist文件夹下会多一个outputs文件夹，运行outputs\demo-win32-x64里面的exe文件，能正常运行就ok
然后，我需要能在渲染进程调用ipc，于是我还需要设置预加载文件来将ipcrender加入windows
首先在dist文件夹下新建electron-preload.js文件，内容为：

const { ipcRenderer } = require('electron')
window.ipcRenderer = ipcRenderer

然后在dist文件夹下的main.js中修改配置，在设置窗口大小的位置同级添加参数：webPreferences:{preload: path.resolve(__dirname, 'electron-preload.js')}，如下图：

然后在渲染进程与主进程添加ipc通讯相关代码后重新打包运行，成功！
代码demo：https://download.youkuaiyun.com/download/qq_40488121/12799093
希望之后不要出问题了吧