Electron-vue 安装、问题、技术点

1.创建Electron-vue 项目

vue init simulatedgreg/electron-vue my-project

2.遇到的bug

1.控制台，如下报错

控制台报错

解决办法

在.electron-vue的文件夹中的dev-runner.js文件

做如下图修改

  const server = new WebpackDevServer(
      compiler,
      {
        contentBase: path.join(__dirname, '../'),
        quiet: true,
        // hot: true,
        // hot: false,
        // 原 hot为true
        before (app, ctx) {
          app.use(hotMiddleware)//原，此行被注释
          ctx.middleware.waitUntilValid(() => {
            resolve()
          })
        }
      }
    )

注释掉hot
将原来的 app.use(hotMiddleware)注释打开

2.项目打包发布时报错(一)

截图：

在这里插入图片描述

原因：
.electron-vue\build.js文件中，tasks变量重复命名了

在这里插入图片描述

解决办法：
修改其中一对的tasks变量名，需要注意的是本文件中一共包含四个tasks，前两个是一对，后两个是一对，修改时请对应修改。

3.项目打包发布时报错(二)

image.png

原因：
.electron-vue\build.js文件中，代码中使用了 Multispinner ，但没有在开头引用，并且package.json文件中也没有这个依赖文件。

解决办法：
先安装 Multispinner ，再在文件中引用

npm install multispinner -D

const Multispinner = require('multispinner')

4.项目打包发布时报错(三)

Error: C:\Users\Administrator\AppData\Local\electron-builder\Cache\nsis\nsis-3.0.3.2\Bin\makensis.exe exited with code 1Output:
Command line defined: "APP_ID=com.example.yourapp"
Command line defined: "APP_GUID=1fb8a7aa-e784-579d-a981-2142d5507b97"
Command line defined: "UNINSTALL_APP_KEY=1fb8a7aa-e784-579d-a981-2142d5507b97"
Command line defined: "PRODUCT_NAME=my-project"
Command line defined: "PRODUCT_FILENAME=my-project"
Command line defined: "APP_FILENAME=my-project"
Command line defined: "APP_DESCRIPTION=An electron-vue project"
Command line defined: "VERSION=0.0.1"
Command line defined: "PROJECT_DIR=F:\2017ѧϰ����\3. ���濪��\my-project"
Command line defined: "BUILD_RESOURCES_DIR=F:\2017ѧϰ����\3. ���濪��\my-project\build"

解决办法：
electron项目路径不能有中文！

5.electron-vue与vuetify整合出现报错：If you‘re seeing “$attrs is readonly“

如题所示，正常情况下electron-vue与vuetify的整合，因为就是vue与vuetify的整合，按照一般的推荐方法，基本不会出错，但是，这里因为electron-vue项目采用了webpack打包构建，导致了问题：

在这里插入图片描述

解决办法：
我们可以找到项目根目录下.electron-vue目录下的webpack.renderer.config.js文件，找到如下代码：

let whiteListedModules = ['vue']

增加一个"vuetify" 。

image

再次运行npm run dev，项目正常启动，窗口程序显示正常，不再报错

3.功能

功能一：最小化 最大化 关闭

index.vue

mixBtn() {
    console.log('最小化')
    this.$electron.ipcRenderer.send('minBtn')
},
maxBtn() {
    this.$electron.ipcRenderer.send('maxBtn')
    console.log('最大化')
},
closeBtn() {
    this.$electron.ipcRenderer.send('closeBtn')
    console.log('关闭')
},

在main文件中新建一个js ipcMain.js

var {ipcMain,BrowserWindow} = require('electron')

// 获取当前窗口对象
let win = BrowserWindow.getFocusedWindow()
// 最小化
ipcMain.on('minBtn', (e, data) => {
    console.log('minBtn')
    win.minimize()
})
// 最大化
ipcMain.on('maxBtn', (e, data) => {
    // 判断当前是否是最大化
    if (win.isMaximized()) {
        win.unmaximize()
    } else {
        win.maximize()
    }
})
// 关闭
ipcMain.on('closeBtn', (e, data) => {
    win.close()
})  

功能二：打开外部浏览器

this.$electron.shell.openExternal(url)

功能三：监听网络变化

app.vue 里面全局执行

// 有网
 window.addEventListener('online', () => {
    // alert('有网')
 })
// 无网
window.addEventListener('offline', () => {
     alert('没有网')
})

功能四：右键弹出菜单

app.vue 全局监听

// 监听用户右键
    window.addEventListener('contextmenu',()=>{
     this.$electron.ipcRenderer.send('contextmenu')
   })

在main文件里面新建一个menu.js

var {Menu,ipcMain,BrowserWindow} = require('electron')


// 右键弹出菜单
const contextMenuGroup = [{
    label: '复制',
    role: 'copy'
}, {
    label: '黏贴',
    role: 'paste'
}, {
    type: 'separator' //分割线
}, {
    label: '刷新',
    role: 'reload'
}, {
    label: '其他功能',
    click: () => {
        console.log('1111111111')
    }
}]

const contextmenu = Menu.buildFromTemplate(contextMenuGroup)
ipcMain.on('contextmenu', (e, data) => {
    contextmenu.popup(BrowserWindow.getFocusedWindow())
})

功能五：点击右上 角关闭按钮隐藏到托盘 双击显示

(function() {
    var {Menu,Tray,app,BrowserWindow} = require('electron');
    // 创建系统托盘
    const path = require('path');
    var appIcon = new Tray(path.join(__dirname, '../renderer/assets/favicon2.ico'));

    // 新建菜单
    const menu = Menu.buildFromTemplate([{
        label: '设置',
        click: function() {} //打开相应页面 
    }, {
        label: '帮助',
        click: function() {}
    }, {
        label: '关于',
        click: function() {}
    }, {
        label: '退出',
        click: function() {
            // BrowserWindow.getFocusedWindow().webContents().send('close-main-window');
            app.quit();
        }
    }])
    // 鼠标放在托盘上显示名称
    appIcon.setToolTip('my best app');
    appIcon.setContextMenu(menu);

    let win = BrowserWindow.getFocusedWindow();

    // 监听任务栏图标的单击、双击事件
    appIcon.on('double-click', () => {
        console.log(win);
        win.show();
    })
    // Electron 点击右上角关闭按钮隐藏任务栏图标
    win.on('close', (e) => {
        console.log(win.isFocused());
        if (!win.isFocused()) {
            win = null;
        } else {
            e.preventDefault(); /*阻止应用退出*/
            win.hide(); /*隐藏当前窗口*/
        }
    })
})()

功能六：渲染线程给主线程发送信息

***.vue 渲染页面

this.$electron.ipcRenderer.send('minBtn')

***.js主线程页面

ipcMain.on('minBtn', (e, data) => {
    console.log('minBtn')
})

功能七：主线程给渲染线程发送信息

（第一种）

***.js主线程页面

ipcMain.on('minBtn', (e, data) => {
    console.log('minBtn')
       e.sender.send('replay','收到了消息')
})

***.vue 渲染页面

this.$electron.ipcRenderer.on('replay', (e, data) => {
    console.log('-------------')
    console.log(data)
})

（第二种）

渲染进程

const msg = this.$electron.ipcRenderer.sendSync('msg-a')
console.log(msg)

主进程

ipcMain.on('msg-a', (e, data) => {
    console.log('minBtn')
    e.returnValue = 'hello'
})

（第三种）

主进程

BrowserWindow.getFocusedWindow().webContents.send('replay','sddsfdfdf')

渲染页面

this.$electron.ipcRenderer.on('replay',(e,arg)=>{
    console.log('======================')
    console.log(arg)
})