There are various problems in the framework that I have
created . When I build my own electron, I may encounter the Vue2.x version
https://github.com/dmhsq/electron-vue-dmhsq
or
https://github.com/dmhsq/electron -vue / Tree / main / Template
Vue3.x version
https://github.com/dmhsq/electron-vue3-dmhsq
other tutorial written tutorial address will be evacuated package several tools
The solution is as follows
Step on the pit
There may be a problem if you feel it yourself. Don’t spray
1.解决fs.existsSync is not a function
This situation occurs when vue introduces electron's ipcRenderer and other modules.
Solution
Custom events are captured by the rendering process.
Add in your page code (such as vue file)
let cus = new CustomEvent("test_event",{
detail:{
你的数据}});
window.dispatchEvent(cus);
Explanation:
cus defines a window event detail to pass data
test_event: custom event name
window.dispatchEvent(cus); trigger custom event
Add the following code in the rendering process to monitor
const {
ipcRenderer } = require("electron");
window.addEventListener('test_event',(e)=>{
console.log('开始了哦')
console.log(e.detail)//这里就是你发送的数据
ipcRenderer.send("test",e.detail);
})
The rendering process uses ipcRenderer to send data to the main process.
Description test is the name of the event sent to the main process.
The following main process receives the code
ipcMain.on("test", () => {
...做处理
});
2. Solve the change of http:// to file:// when the electron sends a request (also can solve the proxy)
When sending a request to trigger an event
such as
export const find = params => {
let cus = new CustomEvent("axioes");
window.dispatchEvent(cus);
return axios.get("/api/find", {
params: params });
};
In the rendering process
window.addEventListener('axioes',()=>{
ipcRenderer.send('axioso')
})
In the main process (session module needs to be introduced)
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);
}
);
}
Description:
const filter = {
urls: ["*://api/*", "file://api/*"]
};
Define interception rules for requests matching the api string
Description:
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);
}
);
Rewrite the request address before sending the request.
Originally, my request address was http://localhost:8086/edusys/admin/find, and the
proxy was /api/find.
My vue project port was 8080,
so I needed to change "/api/find" Is "http://localhost:8080/api/find"
so my nginx configuration is as follows
server {
listen 8080;
server_name localhost;
location / {
root html;
index index.html index.htm;
}
location /api {
proxy_pass http://localhost:8086/edusys/admin;
}
}
3. Realize login and switch users
Two options
Scheme 1 The main process uses the menu to switch
The main process monitors menu events The
main process processing code
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);
}
Solution 2 Vue developed page triggers switching
This is the code of the menu where the switch button is located (part of the code of the head navigation) when the
page clicks to switch, the user triggers a custom event
<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>
Rendering process processing code
window.addEventListener("changeUsers", () => {
//监听changeUsers事件
ipcRenderer.send("changeUsr");//向主进程发送通知
})
Main process processing code
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);
}
Hello, everyone, I am a code husky, a student of network engineering in the Software College, because I am a "dog", and I can eat meat for thousands of miles. I want to share what I learned during university and make progress with everyone. However, due to the limited level, there will inevitably be some mistakes in the blog. If there are any omissions, please let me know! For the time being, only update on the csdn platform, the blog homepage: https://blog.csdn.net/qq_42027681 .
未经本人允许，禁止转载
Will be launched later
Front-end: vue entry vue development applet, etc.
Back-end: java entry springboot entry, etc.
Server: MySQL entry server simple instructions cloud server to run the project
python: recommended not to warm up, be sure to see
the use of some plug-ins, etc.
The way of university is also in oneself, study hard, youth
with passion. If you are interested in programming, you can join our qq group to communicate together: 974178910
If you have any questions, you can leave a message below, I will reply if you see it