踩坑 electron-vue

第一次开发桌面应用。在此记录使用electron-vue搭建桌面版应用所遇到的问题。

process is not defined

按照官网步骤搭建项目，运行npm run dev 时出现 process is not defined 错误。
解决方案：
在.electron-vue/webpack.renderer.config.js和.electron-vue/webpack.web.config.js文件中找到HtmlWebpackPlugin代码段并更改为如下代码：

new HtmlWebpackPlugin({
  filename: 'index.html',
  template: path.resolve(__dirname, '../src/index.ejs'),
  templateParameters(compilation, assets, options) {
    return {
      compilation: compilation,
      webpack: compilation.getStats().toJson(),
      webpackConfig: compilation.options,
      htmlWebpackPlugin: {
        files: assets,
        options: options
      },
      process,
    };
  },
  minify: {
    collapseWhitespace: true,
    removeAttributeQuotes: true,
    removeComments: true
  },
  nodeModules: process.env.NODE_ENV !== 'production'
    ? path.resolve(__dirname, '../node_modules')
    : false
}),

打包找不到文件报错

第一次运npm run build时报了一大堆文件下载错误，比如electron-vxxx-winxxx.zip 、nsis-xxx等
解决方案：
自己去taobao镜像网站或github上下载相关版本的文件包，放入本地相关目录下。

自定义桌面窗口栏目

通过配置主进程src\main\index.js文件相关属性，完成窗口自定义

import { app, BrowserWindow, ipcMain} from 'electron'
    mainWindow = new BrowserWindow({
        height: 880,
        useContentSize: true,
        width: 1200,
        minWidth: xxx,
        minHeight: xxx,
        title: "XXX",
        frame: false, //添加后自定义标题//自定义边框
        resizable: false, //可否缩放
        movable: true, //可否移动
    })
// 相关事件
ipcMain.on('close', e => {
    mainWindow.close()
})
ipcMain.on('minimize', e => {
    mainWindow.minimize()
})
ipcMain.on('unmaximize', e => {
    mainWindow.unmaximize()
})
ipcMain.on('maximize', e => {
    mainWindow.maximize()
})

vue页面监听事件

const { ipcRenderer } = require("electron");
methods:{
    minimize() {
      ipcRenderer.send("minimize");
    },
    // 文档说可以用这个方法mainWindow.isMaximized()判断窗口是否最大化，但是我测试没有效果，所以就自己定义了一个状态
    maximize() {
      if (this.isMaxSize) {
        ipcRenderer.send("unmaximize");
      } else {
        ipcRenderer.send("maximize");
      }
      this.isMaxSize = !this.isMaxSize;
    },
    close() {
      ipcRenderer.send("close");
    }
}

打包相关配置

1、图标命名自定义
修改package.json文件,在build中配置自定义图标路径和安装名称,需要在build文件夹中放置自定义图标

    "build": {
        "win": {
            "icon": "build/icons/icon.ico", 
            "artifactName": "${productName}_Setup_${version}.${ext}"
        }
    },

2、打包后应用安装目录自定义
修改package.json文件，在build中添加配置

        "nsis": {
            "oneClick": false,
            "allowToChangeInstallationDirectory": true,
            "perMachine": true
        },

3、自动检测版本并更新
修改package.json文件，在build中添加配置

        "publish": [{
            "provider": "generic",
            "url": "http://xxxxxxx/download/" // 打包生成的exe安装包和latest.yml存放路径，浏览器输入地址能下载这两个文件
        }]

安装 electron-updater，在 src\main\index.js中添加更新事件

 
import {
    autoUpdater
} from 'electron-updater'
// 和package.json中配置的下载地址一致
let feedUrl = "http://xxxxxxx/download/";
//检测版本更新
updateHandle(mainWindow, feedUrl);

function updateHandle(window, feedUrl) {
    mainWindow = window;
    let message = {
        error: '检查更新出错',
        checking: '正在检查更新……',
        updateAva: '检测到新版本，正在下载……',
        updateNotAva: '现在使用的就是最新版本，不用更新',
    };
    //设置更新包的地址
    autoUpdater.setFeedURL(feedUrl);
    //监听升级失败事件
    autoUpdater.on('error', function (error) {
        sendUpdateMessage({
            cmd: 'error',
            message: error
        })
    });
    //监听开始检测更新事件
    autoUpdater.on('checking-for-update', function (message) {
        sendUpdateMessage({
            cmd: 'checking-for-update',
            message: message
        })
    });
    //监听发现可用更新事件
    autoUpdater.on('update-available', function (message) {
        sendUpdateMessage({
            cmd: 'update-available',
            message: message
        })
    });
    //监听没有可用更新事件
    autoUpdater.on('update-not-available', function (message) {
        sendUpdateMessage({
            cmd: 'update-not-available',
            message: message
        })
    });

    // 更新下载进度事件
    autoUpdater.on('download-progress', function (progressObj) {
        sendUpdateMessage({
            cmd: 'download-progress',
            message: progressObj
        })
    });
    //监听下载完成事件
    autoUpdater.on('update-downloaded', function (event, releaseNotes, releaseName, releaseDate, updateUrl) {
        sendUpdateMessage({
            cmd: 'update-downloaded',
            message: {
                releaseNotes,
                releaseName,
                releaseDate,
                updateUrl
            }
        })
        //退出并安装更新包
        autoUpdater.quitAndInstall();
    });

    //接收渲染进程消息，开始检查更新
    ipcMain.on("checkForUpdate", (e, arg) => {
        //执行自动更新检查
        // sendUpdateMessage({cmd:'checkForUpdate',message:arg})
        autoUpdater.checkForUpdates();
    })
}
//给渲染进程发送消息
function sendUpdateMessage(text) {
    mainWindow.webContents.send('message', text)
}

在App.vue中添加检测更新事件