建站
咨询
售后
建站咨询
本篇内容介绍了“vuecli+electron实例分析”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
创新互联公司服务紧随时代发展步伐，进行技术革新和技术进步，经过十多年的发展和积累，已经汇集了一批资深网站策划师、设计师、专业的网站实施团队以及高素质售后服务人员，并且完全形成了一套成熟的业务流程，能够完全依照客户要求对网站进行网站设计制作、成都做网站、建设、维护、更新和改版，实现客户网站对外宣传展示的首要目的，并为客户企业品牌互联网化提供全面的解决方案。
用vuecli创立一个vue工程
vue create electron-vue-my
安装electron-builder
vue add electron-builder
// 安装的东西很多，注意网络
// 可以先安装cnpm install --save-dev electron-chromedriver
// 本人安装时，报了很多错，后来隔天新建了个工程，一下子就安装成功了
安装成功后，运行npm run electron:serve，假如出现以下页面，说明成功了
image.png
打包桌面应用
// 执行下面的命令就可
npm run electron:build
//在dist_electron目录下会发现一个exe，双击这个exe会执行安装程序。
//还有一个win-unpacked文件夹，里面是我们之前打包的模式，点击里面的electron-vue-my.exe，就可运行
Electron 配置
常规的配置基本上都在background.js中
取消跨域限制
win = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true, webSecurity: false }})设置窗口图标
准备windows和macOS两版图标。
windows: app.ico 最小尺寸：256x256
macOS: app.png或者app.icns 最小尺寸：512x512
把图标文件放到public目录下：
|- /dist_electron （略）|- /public |- app.icns |- app.ico |- app.png |- favicon.ico |- index.html|- /src （略）|- .editorconfig |- .eslintrc.js|- .gitignore|- babel.config.js|- package.json|- package-lock.json|- README.md
图标生成
安装组件，cnpm install --save-dev electron-icon-builder
准备好你的图标，放到/public/icon.png
在package.json的scripts下新添加一条命令
"electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"执行，npm run electron:generate-icons，生成一系列图标，把图标复制到public目录。
打包配置
修改vue.config.js，这里我就把修改的部分放出来：
module.exports = { pluginOptions: { electronBuilder: { builderOptions: { "appId": "com.wangdaodao.app", "productName": "AppDemo ", //项目名，也是生成的安装文件名 "copyright": "Copyright © 2020", //版权信息 "directories": { "output": "./dist_electron" //输出文件路径 }, "win": { //win相关配置 "icon": "./public/icons/icon.ico", //图标，当前图标在根目录下，注意这里有两个坑 "target": [ { "target": "nsis", //利用nsis制作安装程序 "arch": [ "x64", //64位 "ia32" //32位 ] } ] }, "mac": { "icon": "./public/icons/icon.icns" }, "nsis": { "oneClick": false, // 能否一键安装 "allowElevation": true, // 允许请求提升。 假如为false，则客户必需使用提升的权限重新启动安装程序。 "allowToChangeInstallationDirectory": true, // 允许修改安装目录 "installerIcon": "./public/icons/icon.ico", // 安装图标 "uninstallerIcon": "./public/icons/icon.ico", //卸载图标 "installerHeaderIcon": "./public/icons/icon.ico", // 安装时头部图标 "createDesktopShortcut": true, // 创立桌面图标 "createStartMenuShortcut": true, // 创立开始菜单图标 "shortcutName": "AppDemo", // 图标名称 }, } } }}打包APP
npm run electron:build
删除dist_electron文件夹，重新执行打包命令，npm run electron:build，会发现应用的图标变了
最终在dist_electron目录下生成build后的产品。
/dist_electron|- /bundled （略）|- /win-unpacked <-- 绿色版 （略）|- AppDemo Setup 0.1.0.exe <-- 安装文件|- AppDemo Setup 0.1.0.exe.blockmap|- builder-effective-config.yaml|- index.js
“vuecli+electron实例分析”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注创新互联网站，小编将为大家输出更多高质量的实用文章！
分享文章：vuecli+electron实例分析
网页路径：http://lswzjz.com/article/jhhhcd.html
