Electron 报错 Uncaught (in promise) TypeError: Cannot read property ‘showMessageBox‘ of undefined

Uncaught (in promise) TypeError: Cannot read property ‘showMessageBox’ of undefined

Electron 项目叙述：

Vue3 + TypeScript + electron 使用 electron-builder 集成 electron-vue 自带最高可以选择electron^13.0.0 （嫌弃。。。）

毕竟目前最新版本都到electron^23.2.0+了，但是没得办法Vue3香的嘞，原不想写折腾原生HTML+CSS+JS那一套，也不想写 Angular React ~

暂时找不到更好的集成方案，再加上项目进度迫在眉睫实属无奈之举，当然如果你有更好的方案可以推荐一下最好是Vue3 Vue vue…，在这里先向各位说一声谢谢啦…

我想要实现的用法 在渲染进程中即Vue Setup中使用 remote 模块

原先写法：

在 background.ts 中

// 引入
import * as remote from '@electron/remote/main';
// 初始化
remote.initialize();
// 监听应用的启动事件
app.on('ready', async () => {
// 创建设置子窗口
const window = new BrowserWindow({
	// 配置此次省略...
	{
      // 使用remote模块,electron10x还是多少来着 版本之后废除了,需要自己安装...
      enableRemoteModule: true, // 老版本14x之前开启就可以使用了
	}
});
// 使用remote模块,electron13之后 开启remote
// remote.enable(window.webContents);
})

在 渲染进程 vue 中

<script lang="ts" setup>
import {ipcRenderer} from 'electron';
import {dialog} from '@electron/remote'
// 打开dialog
const openDialog = () => {
      dialog.showMessageBox({
        // 其它省略...
        message: '香的嘞~'
      })
})
<script/>

在 调试控制台 中…

Uncaught (in promise) TypeError: Cannot read property 'showMessageBox' of undefined

这才是重点解决方法 在渲染进程 Vue 中：

<script lang="ts" setup>
import {ipcRenderer} from 'electron';
// import {dialog} from '@electron/remote' // 原来引入方式electron13版本之后的使用方式
const { remote } = window.require('electron') // + New 引入方式（没办法版本太老了这也就是为什么我嫌弃的原因，因为这种引入方式在 electron13x 版本之后废除了......）
// 打开dialog
const openDialog = () => {
	  // 原
      /* 
      dialog.showMessageBox({
        // 其它省略...
        message: '香的嘞~'
      })
      */
		// 改
	   remote.dialog.showMessageBox({
        // 其它省略...
        message: '不香的嘞~'
      })
})
<script/>