vite+vue3+electron踩坑记录ipcRenderer通信，vue-router打包白屏问题

why_novice

已于 2024-04-28 10:07:36 修改

阅读量1.5k

点赞数 6

CC 4.0 BY-SA版权

分类专栏：前端文章标签： electron vue.js

于 2024-04-28 08:00:00 首次发布

本文链接：https://blog.youkuaiyun.com/lazy_why/article/details/138262899

前端专栏收录该内容

5 篇文章

订阅专栏

本文记录了作者在使用Electron开发桌面应用时遇到的问题，如VueRouter的白屏问题、窗口头部美化和通信问题。通过调整路由模式、隐藏窗口头部和使用IPC通信，作者解决了这些问题并分享了相关代码片段。

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

公司有需求做桌面应用，趁着周末尝试使用electron做一个自己的小桌面应用练练手。
开发环境昨天配置完成，今天正式开干。
开发环境的搭建
喜欢听的歌有些在某云音乐，有些在某鹅音乐，所以决定自己开个会员，把自己想听的歌下载下来放自己服务器，再做一个桌面播放器。
一天下来做了个寂寞,看看效果
在这里插入图片描述

记录今天踩过的坑
一、使用vue-router之后，打包出现白屏
原因：使用了history路由，把createWebHistory改成createWebHashHistory，使用hash路由

const router = createRouter({
  history: createWebHashHistory(import.meta.env.BASE_URL),
  routes
})

二、窗口头部太难看了，隐藏掉窗口头部和菜单栏之后无法关闭程序，只能使用ipcRenderer和主进程通信关闭程序
主进程main.js
contextIsolation 不启用隔离时报错无法进行通信
preload.js 使用相对路径时报错 must be an absolute path

//...
let win = new BrowserWindow({
    width: 800,
    height: 600,
    minWidth:800,
    minHeight:600,
    transparent: true,//窗口背景透明
    webPreferences: {
      nodeIntegration: false, // 是否允许在页面中使用节点js 不安全
      contextIsolation: true, // 不启用上下文隔离 这里如果是false的话无法通信
      enableRemoteModule: true, // 允许使用 remote 模块
      preload: path.join(__dirname,"preload.js")
    },
    frame:false, //隐藏标题栏
  });
  //其他逻辑代码
  //...
    // 切换全屏事件
  ipcMain.on('toggle-full-screen', () => {
    toggleFullScreen();
  });
  // 最小化窗口事件
  ipcMain.on('minimum', () => {
    win.minimize();
  });
  // 关闭程序
  ipcMain.on('closeProgram', () => {
    app.quit();
  });

preload.js
这里面一开始我使用import引入electron一直运行无效，也没有报错，问了GPT说路径如果没错,可能语法不支持，使用require之后成功

const { contextBridge, ipcRenderer } = require('electron')

contextBridge.exposeInMainWorld('ipcRenderer', {
  send: (channel, data) => {
    let validChannels = ['toggle-full-screen','minimum','closeProgram'] // 配置合法消息名
    if (validChannels.includes(channel)) {
      ipcRenderer.send(channel, data)
    }
  },
  receive: (channel, func) => {
    let validChannels = ['toggle-full-screen','minimum','closeProgram']// 配置合法监听事件名称
    if (validChannels.includes(channel)) {
      ipcRenderer.on(channel, (event, ...args) => func(...args))
    }
  }
})
alert('1')//没弹窗就是失败了 成功后删除

自己写的窗口头部组件header.vue

//...
const toggleFullScreen = ()=>{
    (window as any).ipcRenderer.send('toggle-full-screen','');
}
const minimize = ()=>{
    (window as any).ipcRenderer.send('minimum','');
}
const closeProgram = ()=>{
    (window as any).ipcRenderer.send('closeProgram','');
}
//...
<div @click="minimize">最小化</div>
<div @click="toggleFullScreen ">全屏</div>
<div @click="closeProgram ">退出</div>

周日了，要注意劳逸结合