electron-vue与better-sqlite3结合后在dev和build后正常运行的配置

electron-vue中文网站simulatedgreg.gitbooks.io/electron-vu…

我使用的是 bash 命令，cmd 需要自己改一下

前置环境，编译工具

node 版本必须是12.13.0
需要安装Python 和 Visual Studio，两种方式
- 使用下面的命令，但是可能会卡在某个环节
```
npm install --global --production windows-build-tools
```
- 直接去下载对应的软件包
  
  安装 Python
  
  安装 Visual Studio 2017
使用npm安装编译工具 node-gyp

npm install -g node-gyp

安装

安装Vue CLI

npm install -g @vue/cli

初始化electron-vue项目

vue init simulatedgreg/electron-vue my-project

这时可能会报 vue: command not found 原因是cli3使用了和旧版相同的 vue 命令，所以需要使用下面命令全局安装一个桥接工具

npm install -g @vue/cli-init

因为electron版本太低了，我升级到8.5.5版本，修改package.json中原有依赖版本。注意：electron-builder 的 ^ 改为 ~

"dependencies": {
    "better-sqlite3": "^7.4.3",
},
"devDependencies": {
    "electron": "^8.5.5",
    "electron-debug": "^3.2.0",
    "electron-devtools-installer": "^3.2.0",
    "electron-builder": "~22.9.1",
    "electron-rebuild": "^3.2.3"
}

运行 npm install

问题：

require is not defined

解决方案：/src/main/index.js文件中，创建窗口使用的new BrowserWindow增加配置项 webPreferences: { nodeIntegration: true, contextIsolation: false }

  mainWindow = new BrowserWindow({
    height: 563,
    useContentSize: true,
    width: 1000,
    webPreferences: {
      nodeIntegration: true,
      contextIsolation: false
    }
  })

npm run build 后出现 SyntaxError: Identifier 'tasks' has already been declared

官方 Bug，使用 const 声明了同一个变量修改两处

解决方案
```
const tasks = new Listr  ->  const tasksListr = new Listr // 44行

await tasks  ->  await tasksListr // 76行
```
npm run build 后出现 Application entry file "dist\electron\main.js" in the "E:\project\notepad\build\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration. failedTask=build stackTrace=Error: Application entry file "dist\electron\main.js" in the "E:\project\notepad\build\win-unpacked\resources\app.asar" does not exist. Seems like a wrong configuration.

官方bug，build.js 中使用了 Multispinner，却没有安装引入

解决方案
```
npm i multispinner --save-dev
```
.electron-vue/build.js 文件中添加
```
const Multispinner = require('multispinner')
```
这个时候如果我们 npm run dev 打开项目后，可能会出现下面报错 better_sqlite3.node was compiled against a different Node.js version using NODE_MODULE_VERSION 83. This version of Node.js requires NODE_MODULE_VERSION 98

但是文章上面的 node 12.13.0 和 electron 8.5.5 是不会触发这个问题的。这个问题是我之前把electron 升级到了15.3.0，然后就各种报错，下面的方法只能解决运行时的错误，但是 build 后仍然会出现这个问题。没有找到合适的解决方法。

1636280073(1).png

这是因为 electron Module Version 和 node 的 NODE_MODULE_VERSION 不一致导致，具体内容的可以打开最下方的两个链接

如果打开 node_modules/better-sqlite3/build/config.gypi 文件，搜索 node_module_version，就会看见对应的版本号的恰好是 "node_module_version": 83

是不是和上面错误的提示的版本号一样

这个时候我们需要复制 electron 的版本号 15.3.0, 执行下面命令。其它版本electron改成对应的版本号就好

cd node_modules/better-sqlite3

node-gyp rebuild --release --target=15.3.0 --arch=x64 --dist-url=https://electronjs.org/headers

然后你再 npm run dev 运行程序后发现，就没有报错了

electron 和 node 网站上显示的 Module Version 版本，会发现对不上

electron-releases 中 electron 对应的 Module Version

www.npmjs.com/package/ele…
node官网中对应的 NODE_MODULE_VERSION 说明

nodejs.org/zh-cn/downl…