在vue项目中使用electron

首先创建vue项目（这里2.x版本为例）

vue create electrondemo
1

步骤如下：

选择自定义安装 回车
然后将一些自己需要的选项勾选上（例如路由vuex等） 回车
然后选择2.x版本 回车
输入no回车
选择最后一个 回车
接下来几步一直回车就可以
等待项目创建完成后拖入编码器
npm i
npm run serve运行项目看看是否正常

安装安装electron

githb网址
在项目终端输入以下代码进行安装

vue add electron-builder
1

遇到选项后直接yes进行下一步
然后选择最新版本的electron
等待安装完成

运行项目

npm run electron:serve
等待其运行起来
1
2

简单的例子

点击vue图标弹出一个通知

渲染进程home.vue中
<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" @click="hello()" />
    <HelloWorld msg="Welcome to Your Vue.js App" />
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from "@/components/HelloWorld.vue";
import { ipcRenderer } from "electron";
export default {
  name: "Home",
  components: {
    HelloWorld,
  },
  methods: {
    //渲染进程定义事件指定主进程事件名称
    hello() {
      ipcRenderer.invoke("hello");
    },
  },
};
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

此时会抛出一个错误
因为没有开启使用node的权限

打开vue.config.js中配置如下代码

// https://www.electron.build/configuration/configuration     electron官方配置文档
module.exports={
    pluginOptions:{
        electronBuilder:{
            builderOptions:{
                win:{
                    //配置打包方式
                    target:"nsis"
                },
                nsis:{
                    oneClick:false,//是否一键安装
                    allowToChangeInstallationDirectory:true//开启自定义安装目录
                    
                }, 
            },
            nodeIntegration:true
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

随后去主进程backgroundjs中添加事件
首先导入俩个依赖

在background.js文件的最后输入如下

ipcMain.handle('hello',()=>{
  const notification = new Notification({
    title:"hello !!!"
  })
  notification.show()
})
1
2
3
4
5
6

最后运行项目点击logo，系统成功弹出hello

打包项目

npm run electron:build
默认打包位置跟当前项目同级
没优化打包速度很慢
1
2
3

双击应用程序进行安装

打包基本优化

在vue项目中新建vue.config.js

// https://www.electron.build/configuration/configuration     electron官方配置文档
module.exports={
    pluginOptions:{
        electronBuilder:{
            builderOptions:{
                win:{
                    //配置打包方式
                    target:"nsis"
                },
                nsis:{
                    oneClick:false,//是否一键安装
                    allowToChangeInstallationDirectory:true//开启自定义安装目录
                }
            }
        }
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

优化后打包

随后点击完成自动启动项目

更多配置查看
https://www.electron.build/configuration/configuration