首次使用electron-vue踩过的坑

近期公司人事检测公司人员电脑是否有违规文件，原先都是人事通过人工看每台电脑采集的数据，为了帮助他们快速检测文件我准备帮助他们做一个文件分析工具。程序为单机版客户端，因此我想到了用electron进行开发。

在使用electron-vue进行开发时比较顺利，就跟平时使用vue开发项目一样，但是在打包时遇到了问题，不知道什么原因，项目打包时候依赖与canvas的包，装这个包遇到很多问题。

一、msvs_version was set from command line or npm config

gyp ERR! find VS 
gyp ERR! find VS msvs_version was set from command line or npm config
gyp ERR! find VS - looking for Visual Studio version 2019
gyp ERR! find VS VCINSTALLDIR not set, not running in VS Command Prompt
gyp ERR! find VS could not use PowerShell to find Visual Studio 2017 or newer
gyp ERR! find VS looking for Visual Studio 2015
gyp ERR! find VS - found in "C:\Program Files (x86)\Microsoft Visual Studio 14.0"
gyp ERR! find VS - could not find MSBuild in registry for this version
gyp ERR! find VS not looking for VS2013 as it is only supported up to Node.js 8
gyp ERR! find VS
gyp ERR! find VS valid versions for msvs_version:
gyp ERR! find VS
gyp ERR! find VS **************************************************************
gyp ERR! find VS You need to install the latest version of Visual Studio
gyp ERR! find VS including the "Desktop development with C++" workload.
gyp ERR! find VS For more information consult the documentation at:
gyp ERR! find VS https://github.com/nodejs/node-gyp#on-windows
gyp ERR! find VS **************************************************************

本以为是我IDE的事，我使用的是VS Code 1.52.1，难道要换成最新版的Visual Studio？从网上查询得知需要安装windows-build-tools，需要注意的是，必须是以管理员身份来进行安装，因此在打开cmd时要以管理员身份打开。

npm install --g --production windows-build-tools

二、Please restart this script from an administrative PowerShell

本以为会顺利安装windows-build-tools结果还是报错了。

Starting installation...
Please restart this script from an administrative PowerShell!
The build tools cannot be installed without administrative rights.
To fix, right-click on PowerShell and run "as Administrator".
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! windows-build-tools@5.2.2 postinstall: `node ./dist/index.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the windows-build-tools@5.2.2 postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

问题在于我确定自己用的是管理员模式，为什么还是不行呢，查询资料得之，需要全局安装
reinstallnpm包然后再重新执行上边命令。

npm install reinstall -g
npm install -g windows-build-tools

三、A dynamic link library (DLL) initialization routine failed

尴尬的事又发生了，我在装打包环境时想再看看开发环境的系统，结果执行命令后报出这个错误。查询了一下资料。Electron支持本机节点模块，但是由于Electron使用的是与官方Node不同的V8版本，因此在构建本机模块时必须手动指定Electron标头的位置。

# On Windows if you have trouble, try:
.\node_modules\.bin\electron-rebuild.cmd

四、gyp ERR! stack Error: Can’t find Python executable “python”, you can set the PYTHON env variable.

编译时报出这个错误，原来electron-vue打包还需要依赖Python，结果又安装Python。

五、Cannot open include file: ‘cairo.h’: No such file or directory

打包时又报出来这样的问题，经过网上查询手动安装node-canvas需要手动下载一些包到本地。具体参考连接文章即可。

1. Installing node-gyp
2. Installing GTK 2
3. Installing libjpeg-turbo (optional, for JPEG support; node-canvas 2.0 and later)
4. Installing node-canvas

六、不将程序打包为asar

在package.json的build中增加"asar": false

---

参考资料

electronjs
electron-vue
安装node-canvas
A dynamic link library (DLL) initialization routine failed