開發(fā)環(huán)境
node: v14.19.3
npm: 6.14.17
Vue CLI: v5.0.8
創(chuàng)建 Vue 項目
正常創(chuàng)建vue項目谎砾，并能成功運行
# 創(chuàng)建項目
vue create project
# 檢查項目
cd project
npm run serve
配置 Electron
- 安裝依賴
## 添加 electron 構(gòu)建工具
vue add electron-builder
# 添加 electron
npm install electron
- 配置 package.json
"scripts": {
"electron:serve": "vue-cli-service electron:serve",
"electron:build": "vue-cli-service electron:build",
},
- 創(chuàng)建 electron 入口文件
文件位置在
src下面
文件名一定要是background.js
# 參考代碼
const { app, BrowserWindow } = require("electron"); //引入electron
let win;
let windowConfig = {
width: 800,
height: 600,
}; //窗口配置程序運行窗口的大小
function createWindow() {
win = new BrowserWindow(windowConfig); //創(chuàng)建一個窗口
// win.loadURL(`file://${__dirname}/index.html`); //在窗口內(nèi)要展示的內(nèi)容index.html 就是打包生成的index.html
win.loadURL("http://127.0.0.1:8080"); //在窗口內(nèi)要展示的內(nèi)容index.html 就是打包生成的index.html
win.webContents.openDevTools(); //開啟調(diào)試工具
win.on("close", () => {
//回收BrowserWindow對象
win = null;
});
win.on("resize", () => {
win.reload();
});
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
app.quit();
});
app.on("activate", () => {
if (win == null) {
createWindow();
}
});
