踩坑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，查看结果