Electron + VUE 用window.open形式打开新窗口

最新推荐文章于 2025-03-28 15:14:25 发布

竹立荷塘

最新推荐文章于 2025-03-28 15:14:25 发布

阅读量4.4k

点赞数

分类专栏：客户端文章标签： vue.js electron elementui

本文链接：https://blog.csdn.net/daipianpian/article/details/121930494

版权

客户端专栏收录该内容

2 篇文章

订阅专栏

本文讲述了在Electron 10中，如何应对remote模块默认禁用的问题，介绍了如何在主进程和渲染进程中正确配置`enableRemoteModule`以实现窗口操作的跨进程通信，如最小化、最大化和关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、主页面：

<template>
  <div class="header">
   	<span class="el-icon-minus" @click="minimizeWin"></span>
    <span class="el-icon-full-screen" @click="maximizeWin"></span>
    <span class="el-icon-close" @click="closeWin"></span>
    <el-button @click.stop="openWind">打开新窗口</el-button>
   </div>
</template>
<script>
import { ipcRenderer} from 'electron';
export default {
  methods: {
     minimizeWin(){
       ipcRenderer.send('window-min') // 通知主进程我要进行窗口最小化操作
    },
    maximizeWin(){
      ipcRenderer.send('window-max')
    },
    closeWin(){
      ipcRenderer.send('window-close')
    },
    openWind(){
        const { href } = this.$router.resolve({
          path: `/answerSituation`,
          query: {
            id: row.id,
            paperName: this.paperName,
            name: row.name,
            examScore: row.examScore,
            answersTime: row.answersTime
          }
        })
        window.open(href, '_blank')
    }
  }
}
</script>
<style lang="scss">
	.header{
		span{
			font-size:20px;
			margin-right:20px;
			color:red;
		}
	}
</style>

二、新窗口页面：

<template>
  <div class="header">
   	<span class="el-icon-minus" @click="minimizeWin"></span>
    <span class="el-icon-full-screen" @click="maximizeWin"></span>
    <span class="el-icon-close" @click="closeWin"></span>
   </div>
</template>
<script>
import { remote } from 'electron';
export default {
  methods: {
    minimizeWin(){
      remote.getCurrentWindow().minimize(); // 窗口最小化
    },
    maximizeWin(){
      const win=remote.getCurrentWindow();
      if(win.isMaximized()){ // 判断 窗口是否已最大化 
        win.restore();// 恢复原窗口大小
      }else{
         win.maximize();  //最大化窗口
      }
    },
    closeWin(){
      window.close(); // 关闭窗口，也结束了所有进程
    }
  }
}
</script>
<style lang="scss">
	.header{
		span{
			font-size:20px;
			margin-right:20px;
			color:red;
		}
	}
</style>

三、遇到的问题

之前的项目，引用electron的remote可以直接调用 electron.remote 来去使用，而近期使用electron却频繁报错？？？踩坑后我快速去查看了下官方文档，是不是electron进行了更新？果然不出所料，在electron 10中，修改了enableRemoteModule默认为false，我们需要手动将其修改为true。

此前版本中我们使用electron中的remote模块时，不需在主进程的窗口中加入 enableRemoteModule:true 参数才能够调用remote模块，而在 electron 10 中，我们需要加入该参数才能调用该模块。

//引入electron
let electron = require('electron')
//引入remote模块
let remote = electron.remote
//打印remote模块
console.log(remote)

在未加入参数前，会引起报错。

而在主进程中我们需要向 webPreferences 配置参数 enableRemoteModule:true 来打开remote模块，使得渲染进程中可以调用主进程的方法，我们需要对mianWindow来配置

mainWindow = new BrowserWindow({
    width:600,
    height:800,
    /* 启用Node继承 */
    webPreferences:{
      nodeIntegration:true,
      enableRemoteModule:true
    }
  })

问题解决，踩坑完毕。