VUE+ELECTRON桌面应用开发实例

Electron是使用JavaScript，HTML和CSS构建跨平台的桌面应用程序框架。，这篇文章用来记录使用vue+enectron创建桌面应用的过程。

一、创建项目

这里我使用的是HBuilderX，打开HBuilderX创建一个新的vue项目

创建项目

二、配置入口文件

首先我们现在项目根目录下创建vue.config.js文件，vue.config.js是一个可选的配置文件，避免启动白屏。

module.exports = {
    publicPath: "./"
}

接下来我们将依赖引入，在package.json的devDependencies节点中添加
"electron": "18.2.3"
"vue-cli-plugin-electron-builder": "^1.4.0"
然后在scripts节点添加脚本命令
"electron:build": "vue-cli-service electron:build"
"electron:serve": "vue-cli-service electron:serve"
package.json完整代码

{
  "name": "default",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve"
  },
  "main": "background.js",
  "dependencies": {
    "core-js": "^2.6.5",
    "vue": "^2.6.10"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.8.0",
    "@vue/cli-service": "^3.8.0",
    "vue-template-compiler": "^2.6.10",
    "electron": "18.2.3",
    "vue-cli-plugin-electron-builder": "^1.4.0"
  }
}

配置好后执行npm i安装依赖
在src下创建一个background.js主进程入口文件

import {
    app,
    protocol,
    BrowserWindow
} from 'electron'
import {
    createProtocol,
    installVueDevtools
} from 'vue-cli-plugin-electron-builder/lib'
const isDevelopment = process.env.NODE_ENV !== 'production'
 
let win
 
protocol.registerSchemesAsPrivileged([{
    scheme: 'app',
    privileges: {
        secure: true,
        standard: true
    }
}])
 
function createWindow() {
    
    win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            devTools: false,//是否开启调试
            nodeIntegration: true,//是否启用Node integration
            contextIsolation: false,//是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本
        }
    })
 
    if (process.env.WEBPACK_DEV_SERVER_URL) {
        win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
        if (!process.env.IS_TEST) win.webContents.openDevTools()
    } else {
        createProtocol('app')
        win.loadURL('app://./index.html')
    }
 
    win.on('closed', () => {
        win = null
    })
}
 
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit()
    }
})
 
app.on('activate', () => {
    if (win === null) {
        createWindow()
    }
})
 
app.on('ready', async () => {
    if (isDevelopment && !process.env.IS_TEST) {
 
    }
    createWindow()
})
 
if (isDevelopment) {
    if (process.platform === 'win32') {
        process.on('message', data => {
            if (data === 'graceful-exit') {
                app.quit()
            }
        })
    } else {
        process.on('SIGTERM', () => {
            app.quit()
        })
    }
}

执行npm run electron:serve启动项目

项目启动预览图

三、打包

最后一步我们要在vue.config.js配置我们的打包参数

module.exports = {
    publicPath: "./",
    pluginOptions: {
        electronBuilder: {
            builderOptions: {
                "productName": "test", //项目名，也是生成的安装文件名 桌面应用.exe
                "win": { //win相关配置
                    "icon": "", //图标，当前图标在根目录下，注意这里有两个坑
                    "target": [{
                        "target": "nsis", //利用nsis制作安装程序
                        "arch": [
                            "x64", //64位
                            "ia32" //32位
                        ]
                    }]
                },
            },
            nodeIntegration: true
        }
 
    },
}

保存好后执行npm run electron:build完成打包，打包过程中要把杀毒软件关掉，吃过亏/(ㄒoㄒ)/~~

安装包
如果项目打包出错，检查一下项目目录是否存在中文，项目目录不能存在中文