在vue项目中使用electron

在vue项目中使用electron 2023-05-20 722

首先创建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//开启自定义安装目录
                }
            }
        }
    }
}