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

解决如下

踩坑

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);触发自定义事件

在渲染进程
在这里插入图片描述
添加以下代码负责监听

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.实现登陆以及切换用户

两种方案

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

在这里插入图片描述主进程监听菜单事件

主进程处理代码

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);
}

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

在这里插入图片描述

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

<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。

未经本人允许，禁止转载

在这里插入图片描述