欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-04 15:16:50
...

最近的一个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参数,所以在两处都能设置参数

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