Vue3.0配置Electron

一、安装Node.js、Vue CLI

// vue -V
@vue/cli 4.5.11

// node -v
v14.3.0

二、创建Vue3.0项目

 vue create my-electron-app

三、添加vue-cli-plugin-electron-builder依赖

vue add electron-builder

由于网络问题，最好使用淘宝镜像

npm config set registry https://registry.npm.taobao.org

四、运行

npm run electron:serve

image.png

五、调用Electron API和Node.js API

background.js中配置：

webPreferences: {
  // webSecurity: false,// 取消跨域限制
  enableRemoteModule: true, // Electron10以后的版本，取消 Remote 模块警告
  nodeIntegration: true // 是否集成 Nodejs
}

Vue组件中引入：

const { ipcRenderer, remote } = window.require('electron')
const fse = window.require('fs-extra')
const fs = window.require('fs')

六、electron_builder打包

由于打包时需要下载依赖，我们可配置淘宝镜像，这样下载更快。在工程目录下新建“.npmrc”，并配置如下：

electron_mirror="https://npm.taobao.org/mirrors/electron/"
electron_builder_binaries_mirror="http://npm.taobao.org/mirrors/electron-builder-binaries/"

在工程路目录下，新建“vue.config.js”，配置如下：

module.exports = {
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "appId": "com.example.app",
                "productName": "demo", //项目名，也是生成的安装文件名，即demo.exe
                "copyright": "Copyright © 2020", //版权信息
                "directories": {
                    "output": "./dist_electron" //输出文件路径
                },
                "asar": true,
                "dmg": {
                    "contents": [{
                        "x": 410,
                        "y": 150,
                        "type": "link",
                        "path": "/Applications"
                    },
                        {
                            "x": 130,
                            "y": 150,
                            "type": "file"
                        }
                    ]
                },
                "nsis": {
                    "oneClick": false, // 是否一键安装
                    "allowElevation": true, // 允许请求提升。 如果为false，则用户必须使用提升的权限重新启动安装程序。
                    "allowToChangeInstallationDirectory": true, // 允许修改安装目录
                    "installerIcon": "./public/icon.ico", // 安装图标
                    "uninstallerIcon": "./public/icon.ico", //卸载图标
                    "installerHeaderIcon": "./public/icon.ico", // 安装时头部图标
                    "createDesktopShortcut": true, // 创建桌面图标
                    "createStartMenuShortcut": true, // 创建开始菜单图标
                    "shortcutName": "demo", // 图标名称
                },
                "win": { //win相关配置
                    "icon": "./public/icon.ico", //图标，当前图标在根目录下，注意这里有两个坑
                    "target": [{
                        "target": "nsis", //利用nsis制作安装程序
                        "arch": [
                            "x64", //64位
                            "ia32" //32位
                        ]
                    }]
                },
                "mac": {
                    "icon": './public/icon.icns'
                }
            }
        }
    }
}

最后，执行打包命令：

npm run electron:build

在配置的输出目录下，可以找到打包的安装文件：

image.png

双击安装文件，可进行安装。

image.png

参考文章：
https://www.jianshu.com/p/f691abc84fa4
Vue CLI Plugin Electron Builder