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)
})
