关于在Vue项目中，运用electron打包成web桌面应用的心得浅见

最近的一个vue项目由于有做成桌面应用的需求，在网上找了不少，这一篇介绍electron的很有用：

http://blog.csdn.net/j_bleach/article/details/78513282

用过之后，感觉还是有些需要记记的，以免自己下次又用上

不说废话安装走起：

npm i electron -g(全局安装)

npm i electron-packger -g(全局安装，这个是后面打包成.exe应用程序的插件)

npm i electron --save-dev(项目内安装)

npm i electron-packger --save-dev(项目内安装)

注：i是install的缩写，这里的npm也可以用cnpm国内的淘宝镜像会快很多，至于为什么要先全局安装，因为在此之前，我也是在项目中直接执行第三第四条安装命令，但是会报出一个错误导致安装失败，错误的大致意思就是让你先remove node_model文件夹，然后retry；我解决这个问题就是把已经安装的node_model的环境全部删除，然后按顺序执行上述命令，然后再cnpm i 安装剩余的所需环境；当然也有可能不会有报错，总之多试试不亏的。

按照上面那个链接的文章，多试试，基本上就没什么问题的，但如果你想对将要打包的web客户端进行一些设置，那么electron.js文件中的BrowserWindow就是设置的关键，复述不够详细，直接上链接吧：

https://www.w3cschool.cn/electronmanual/electronmanual-browser-window.html

这篇文章很详细的介绍了BrowserWindow的参数配置，可以尽情的对你的web桌面应用进行设定:

// Create the browser window.
  mainWindow = new BrowserWindow({
    width: 1220,//应用程序初始窗口的宽度
    height: 800,//初始窗口高度
    minWidth: 1000,//最小宽度
    minHeight: 600,//最小高度
    title: 'hello world!'//应用程序标题
    ......
})

"scripts": {
    "dev": "node build/dev-server.js",
    "start": "npm run dev",
    "build": "node build/build.js",
    "lint": "eslint --ext .js,.vue src",
    "electron_dev": "npm run build && electron build/electron.js",
    "electron_build": "electron-packager ./dist/ --platform=win32 --arch=x64 --icon=./src/assets/favicon.ico --overwrite"
  }

//electron_build命令中的--icon=./src/assets/favicon.ico其实就是配置了应用程序图标的BrowserWindow参数，所以在两处都能设置参数

个人浅见，如有错误，请评论留言，感谢