Vue 学习之 Electron-vue 小意外

1. 安装

vue create projectName

//安装electron 及vue 支持组件
vue add electron-builder

2. 页面中打印 process.title=“browser”

 最开始在 "vue-cli-plugin-electron-builder": "^1.4.4" 时，可以在页面中使用tcp 等链接，但是当升级到 “^2.2.0”时，页面中就用不了了，查看源码发现，大多数组件在使用底层代码时，都会查询当前的process.title 是否为"browser"，及当前工作环境是否为浏览器；
 [查询文档](https://github.com/nklayman/vue-cli-plugin-electron-builder/releases/tag/v2.0.0-rc.1)发现官方默认关闭了 nodeIntegration，并且不能直接 配置nodeIntegration，须在vue.config.js 中如下配置

3. 添加原生模块(如serialport)

由于Electron 9.0 开始，官方推荐在 渲染进程中不使用原生nodejs 模块，因此会有如下的错误

Uncaught Error: Loading non-context-aware native module in renderer: '\\?\E:\code\electron-quick-start\node_modules\_@serialport_bindings@9.0.0@@serialport\bindings\build\Release\bindings.node', but app.allowRendererProcessReuse is true. See https://github.com/electron/electron/issues/18397.
    at process.func [as dlopen] (electron/js2c/asar.js:140)
    at Object.Module._extensions..node (internal/modules/cjs/loader.js:1034)
    at Object.func [as .node] (electron/js2c/asar.js:140)
    at Module.load (internal/modules/cjs/loader.js:815)
    at Module._load (internal/modules/cjs/loader.js:727)
    at Function.Module._load (electron/js2c/asar.js:769)
    at Module.require (internal/modules/cjs/loader.js:852)
    at require (internal/modules/cjs/helpers.js:74)
    at bindings (E:\code\electron-quick-start\node_modules\_bindings@1.5.0@bindings\bindings.js:112)
    at Object.<anonymous> (E:\code\electron-quick-start\node_modules\_@serialport_bindings@9.0.0@@serialport\bindings\lib\win32.js:1)

解决方法有两种

• 在main.js中设置为false，就在渲染进程中使用原生模块,但是官方不推荐参考

app.allowRendererProcessReuse = false;

参考官方文档找到最佳的解决方案

• 采用主进程与渲染进程之间通讯方式，主进程传递串口的数据到渲染进程
  官方进程之间通讯的示例如下

// 在主进程中.
const { ipcMain } = require('electron')
ipcMain.on('asynchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.reply('asynchronous-reply', 'pong')
})

ipcMain.on('synchronous-message', (event, arg) => {
  console.log(arg) // prints "ping"
  event.returnValue = 'pong'
})

//在渲染器进程 (网页) 中。
const { ipcRenderer } = require('electron')
console.log(ipcRenderer.sendSync('synchronous-message', 'ping')) // prints "pong"

ipcRenderer.on('asynchronous-reply', (event, arg) => {
  console.log(arg) // prints "pong"
})
ipcRenderer.send('asynchronous-message', 'ping')

另外 vue-cli-plugin-electron-builder 将原生包载入工程又进行封装，所以需要添加原生nodejs 模块，还必须开启nodeIntergration ，且需要在electronBuilder 中添加 externals，和nodeModulesPath 两个字段

报的错误

最终的配置
background(.js/.ts)

app.allowRendererProcessReuse = false;

vue.config(.js/.ts)

module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true,
      externals: ['serialport'],
      nodeModulesPath: ['../../node_modules', './node_modules']
    }
  },
  lintOnSave: false
}

• 实战Electron使用SerialPort与串口交互详细全过程
• 使用Vue 插件 vue-cli-plugin-electron-builder 打包原生模板时报错解决
• vue-cli-plugin-electron-builder中使用原生模块

4. 添加主进程文件修改监听

问题：当我主进程调用的文件被修改后，希望该工程可以被重新启动，但是修改background.(ts|js)时才会重新编译工程
过程：看到Vue CLI Plugin Electron Builder 文档时，发现默认情况下，工程默认时监听background.(ts|js)修改的，同时也发现，如果要监听其他文件的修改，需要增加一个配置
解决：再vue.config.js 中增加如下配置

module.exports = {
  pluginOptions: {
    electronBuilder: {
      mainProcessWatch: ["src/app/**/*.ts"],		//监听该目录下所有ts 文件或者可以写成["src/app"],监听文件目录
      preload: "./src/app/common/preload.ts"
    }
  },
  lintOnSave: false
};

参考文档（webpack-configuration）