开发环境
node: v14.19.3
npm: 6.14.17
Vue CLI: v5.0.8
创建 Vue 项目
正常创建vue项目，并能成功运行
# 创建项目
vue create project
# 检查项目
cd project
npm run serve
配置 Electron
- 安装依赖
## 添加 electron 构建工具
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",
},
- 创建 electron 入口文件
文件位置在
src下面
文件名一定要是background.js
# 参考代码
const { app, BrowserWindow } = require("electron"); //引入electron
let win;
let windowConfig = {
width: 800,
height: 600,
}; //窗口配置程序运行窗口的大小
function createWindow() {
win = new BrowserWindow(windowConfig); //创建一个窗口
// win.loadURL(`file://${__dirname}/index.html`); //在窗口内要展示的内容index.html 就是打包生成的index.html
win.loadURL("http://127.0.0.1:8080"); //在窗口内要展示的内容index.html 就是打包生成的index.html
win.webContents.openDevTools(); //开启调试工具
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();
}
});
