vuecli+electron实例分析

本篇内容介绍了“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,假如出现以下页面,说明成功了


vuecli+electron实例分析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

图标生成

  1. 安装组件,cnpm install --save-dev electron-icon-builder

  2. 准备好你的图标,放到/public/icon.png

  3. 在package.json的scripts下新添加一条命令
    "electron:generate-icons": "electron-icon-builder --input=./public/icon.png --output=build --flatten"

  4. 执行,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://scyanting.com/article/jhhhcd.html