【electron】vuecli + electron 的简单方

2021-03-23 本文已影响0人老鼠AI大米_Java全栈

之前要制作桌面应用程序，一般使用vb，vc， Delphi等，不过使用web页面也可以制作桌面应用，就是使用一个桌面容器。

用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

参考：
https://wangdaodao.com/20200707/vue-cli3-electron.html
https://nklayman.github.io/vue-cli-plugin-electron-builder/guide/
https://segmentfault.com/a/1190000021376934