踩坑 electron¶

1 electron 调用 node C++ addon¶

1.1 问题 1：REquire is not defined¶

问题原因：浏览器不支持 require 语法
解决方法：在 electron 中是可以在 html 文件中使用 require 语法的，但需要开启 node.js 环境，在 main.js 文件中添加 nodeIntegration:true

  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      nodeIntegration:true//设置true才可以在html中使用node.js环境
    }
  })

1.2 问题 2：Loading non-context-aware native module in renderer,but app.allowRendererProcessReuse is true.¶

问题原因：在版本 9 之后，app.allowRendererProcessReuse 将默认设置为 true
解决方法：在 main.js 中设置 app.allowRendererProcessReuse = false;

const {app, BrowserWindow} = require('electron')
const path = require('path')

app.allowRendererProcessReuse=false;

1.3 NODE_MODULE_VERSION 版本不对¶

问题原因：electron 自带的 node 版本与本地 node 版本不一致
解决方法：使用 electron-rebuild 工具重新编译

# 安装electron-rebuild
npm i -D electron-rebuild
# 执行编译
./node_modules/.bin/electron-rebuild

2 使用 vue-devTools¶

在 chrome 上安装 vue-devTools
在 chrome 扩展界面找到 Vue.js devtools，并找到 id 值如，ljjemllljcmogpfapbkkighbhhppjdbg
在本地电脑上搜索词 id 值，找到该扩展文件夹，如 vue-devTools 的 beta 版文件夹名 6.0.0.2_0
在 electron-vue 项目的 background.js 文件中的修改如下代码

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      // await installExtension(VUEJS_DEVTOOLS) //注释掉原先代码
      //以下2行新增
      const { session } = require("electron");
      session.defaultSession.loadExtension('...\\Google\\Chrome\\User Data\\Default\\Extensions\\ljjemllljcmogpfapbkkighbhhppjdbg\\6.0.0.2_0');//引号内是vue-devTools扩展地址
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

运行 yarn run electron:serve，查看结果