在vue项目中使用electron

Posted 2022-11-26 老张在线敲代码

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

vue create electrondemo

步骤如下：

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

安装安装electron

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

vue add electron-builder

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

运行项目

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

简单的例子

点击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>

此时会抛出一个错误
因为没有开启使用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
        
    

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

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

ipcMain.handle('hello',()=>
  const notification = new Notification(
    title:"hello !!!"
  )
  notification.show()
)

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

打包项目

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

双击应用程序进行安装

打包基本优化

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

// https://www.electron.build/configuration/configuration     electron官方配置文档
module.exports=
    pluginOptions:
        electronBuilder:
            builderOptions:
                win:
                    //配置打包方式
                    target:"nsis"
                ,
                nsis:
                    oneClick:false,//是否一键安装
                    allowToChangeInstallationDirectory:true//开启自定义安装目录
                
            
        
    

优化后打包

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

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