自己弄的框架中存在各種問題搭建自己用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，