关于在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参数,所以在两处都能设置参数
个人浅见,如有错误,请评论留言,感谢
下一篇: ionic打包时自动签名