记录一次electron踩坑

雨点打透心脏的1/2处 2023-01-08 03:29 335阅读 0赞

> 自己弄的框架中存在各种问题 搭建自己用electron的时候也许会碰到  
> Vue2.x版本  
> [https://github.com/dmhsq/electron-vue-dmhsq][https_github.com_dmhsq_electron-vue-dmhsq]  
> 或者  
> [https://github.com/dmhsq/electron-vue/tree/main/template][https_github.com_dmhsq_electron-vue_tree_main_template]  
> Vue3.x版本  
> [https://github.com/dmhsq/electron-vue3-dmhsq][https_github.com_dmhsq_electron-vue3-dmhsq]  
> 等教程写完 [教程地址][Link 1] 会抽空封装几个工具

> 解决如下

### 踩坑 ###

*  1.解决fs.existsSync is not a function
 *  2.解决electron发送请求时http://变file:// (也能解决代理)
 *  3.实现登陆以及切换用户
 *   *  方案一 主进程使用菜单切换
     *  方案二 Vue开发的页面触发切换

> 自己摸索的 可能有问题 大佬勿喷

# 1.解决fs.existsSync is not a function #

vue引入electron的ipcRenderer等其它模块会出现这种情况  
解决方案  
自定义事件 使用渲染进程捕捉

在你的页面代码(比如vue文件)中加入

let cus = new CustomEvent("test_event",{ detail:{ 你的数据}});
    window.dispatchEvent(cus);

解释：  
cus定义了一个window事件 detail传递数据  
test\_event:自定义事件名  
window.dispatchEvent(cus);触发自定义事件

在渲染进程  
![在这里插入图片描述][20210118213800586.png]  
添加以下代码负责监听

const {  ipcRenderer } = require("electron");
    window.addEventListener('test_event',(e)=>{ 
      console.log('开始了哦')
      console.log(e.detail)//这里就是你发送的数据
      ipcRenderer.send("test",e.detail);
    })

渲染进程使用ipcRenderer向主进程发送数据  
说明test为向主进程发送的事件名

以下为主进程接收代码

ipcMain.on("test", () => { 
      ...做处理
    });

# 2.解决electron发送请求时http://变file:// (也能解决代理) #

发送请求时触发一个事件  
比如

export const find = params => { 
      let cus = new CustomEvent("axioes");
      window.dispatchEvent(cus);
      return axios.get("/api/find", {  params: params });
    };

在渲染进程中

window.addEventListener('axioes',()=>{ 
      ipcRenderer.send('axioso')
    })

在主进程中(需要引入session模块)

const { 
      app,
      BrowserWindow,
      Notification,
      Menu,
      MenuItem,
      ipcMain,
      net,
      session
    } = require("electron");
    ipcMain.addListener("axioso", () => { 
      resq();
    });
    function resq() { 
      const filter = { 
        urls: ["*://api/*", "file://api/*"]
      };
      session.defaultSession.webRequest.onBeforeRequest(
        filter,
        (details, callback) => { 
          console.log(122131231);
          console.log(details);
          // details.url = "http://www.baidu.com"
          let srt = details.url;
          details.url = "http://localhost:8080" + srt.substr(10);
          callback({  redirectURL: details.url });
          console.log(details);
        }
      );
    }

说明：

const filter = { 
        urls: ["*://api/*", "file://api/*"]
      };

定义匹配api字符串的请求的拦截规则

说明：

session.defaultSession.webRequest.onBeforeRequest(
        filter,
        (details, callback) => { 
          console.log(122131231);
          console.log(details);
          // details.url = "http://www.baidu.com"
          let srt = details.url;
          details.url = "http://localhost:8080" + srt.substr(10);
          callback({  redirectURL: details.url });
          console.log(details);
        }
      );

在发送请求之前 改写请求地址  
原本我的请求地址是http://localhost:8086/edusys/admin/find  
使用代理为 /api/find  
我的vue项目端口为8080  
所以需要将"/api/find"变为"http://localhost:8080/api/find"  
所以我的nginx配置如下

server { 
                listen       8080;
                server_name  localhost;
    
                location / { 
                    root   html;
                    index  index.html index.htm;
                }
    
                location /api { 
                   proxy_pass   http://localhost:8086/edusys/admin;
                }
    
            }

# 3.实现登陆以及切换用户 #

两种方案

## 方案一 主进程使用菜单切换 ##

![在这里插入图片描述][20210118222724223.gif]主进程监听菜单事件  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]  
主进程处理代码

## 方案二 Vue开发的页面触发切换 ##

![在这里插入图片描述][20210118224206647.gif]

这是切换按钮所在的菜单的代码(头部导航的部分代码)  
页面点击切换用户触发自定义事件

<el-dropdown>
    	<span style="color: black">
    		教务处<i class="el-icon-arrow-down el-icon--right"></i>
    	</span>
    	<el-dropdown-menu slot="dropdown">
    	<el-dropdown-item>退出</el-dropdown-item>
    	<el-dropdown-item @click.native="changeUser">切换用户</el-dropdown-item>
    	</el-dropdown-menu>
    </el-dropdown>
    <script> export default { name: "MyHeader", methods:{ changeUser(){ console.log("改变用户") let cuss = new CustomEvent("changeUsers");//自定义事件 window.dispatchEvent(cuss);//触发自定义事件 } } }; </script>

渲染进程处理代码

window.addEventListener("changeUsers", () => { //监听changeUsers事件
      ipcRenderer.send("changeUsr");//向主进程发送通知
    })

主进程处理代码

ipcMain.on('changeUsr',()=>{ 
      changeUser();
    });
    function changeUser() { 
      const nm = new Menu();//创建空菜单
      Menu.setApplicationMenu(nm);//菜单设置为空
      createWindows();//创建登陆窗口
      wins.close();//关闭原先的大窗口这里的win是createWindowMain()创建窗口时返回的win
    }
    function createWindowMain() { 
      const win = new BrowserWindow({ 
        width: 1500,
        height: 1000,
        webPreferences: { 
          nodeIntegration: true
        }
      });
      win.loadFile(__dirname + "/dist/index.html");
      // win.webContents.openDevTools();
      reloadTheWin(win);
      return win;
    }
    function createWindows() { 
      const win = new BrowserWindow({ 
        width: 400,
        height: 600,
        webPreferences: { 
          nodeIntegration: true
        }
      });
    
      win.loadFile(__dirname + "./login.html");
      // reloadTheWins(win);
    }

>   大家好，我是代码哈士奇，是一名软件学院网络工程的学生，因为我是“狗”，狗走千里吃肉。想把大学期间学的东西和大家分享，和大家一起进步。但由于水平有限，博客中难免会有一些错误出现，有纰漏之处恳请各位大佬不吝赐教！暂时只在csdn这一个平台进行更新，博客主页：[https://blog.csdn.net/qq\_42027681][https_blog.csdn.net_qq_42027681]。

> `未经本人允许，禁止转载`

![在这里插入图片描述][20201110144238980.gif_pic_center]

后续会推出

前端：vue入门 vue开发小程序 等  
后端： java入门 springboot入门等  
服务器：mysql入门 服务器简单指令 云服务器运行项目  
python：推荐[不温卜火][Link 2] 一定要看哦  
一些插件的使用等

大学之道亦在自身，努力学习，热血青春  
如果对编程感兴趣可以加入我们的qq群一起交流：974178910  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]

有问题可以下方留言，看到了会回复哦

[https_github.com_dmhsq_electron-vue-dmhsq]: https://github.com/dmhsq/electron-vue-dmhsq
[https_github.com_dmhsq_electron-vue_tree_main_template]: https://github.com/dmhsq/electron-vue/tree/main/template
[https_github.com_dmhsq_electron-vue3-dmhsq]: https://github.com/dmhsq/electron-vue3-dmhsq
[Link 1]: https://blog.csdn.net/qq_42027681/category_10690045.html
[20210118213800586.png]: /images/20221119/65d43cf8b1e141a7ac7c6188d54db476.png
[20210118222724223.gif]: /images/20221119/898e46adf29d451682968292f2068f9d.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70]: /images/20221119/28b151bb2705480f8797c2d78401b1cf.png
[20210118224206647.gif]: https://img-blog.csdnimg.cn/20210118224206647.gif
[https_blog.csdn.net_qq_42027681]: https://blog.csdn.net/qq_42027681
[20201110144238980.gif_pic_center]: https://img-blog.csdnimg.cn/20201110144238980.gif#pic_center
[Link 2]: https://buwenbuhuo.blog.csdn.net/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx_size_16_color_FFFFFF_t_70_pic_center]: https://img-blog.csdnimg.cn/20201118225427296.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyMDI3Njgx,size_16,color_FFFFFF,t_70#pic_center