（⼆）electron开发环境配置
开发环境启动
为了⽅便开发，我们需要让vue和electron能同时运⾏，怎么做呢？ 在根⽬录下新建build⽂件夹，增加dev-runner.js⽂件，我们可以在这个⽂件中将vue和electron同时启动。
/*
*使⽤node⼦进程，启动vue和electron
*/
const { spawn } = require("child_process");
const electron = require("electron");
const path = require("path");
const chalk = require("chalk"); // log着⾊输出⼯具
let electronProcess = null;
let vueProcess = null;
// 启动vue项⽬
function startVue() {
return new Promise(resolove => {
vueProcess = spawn("yarn", ["serve"]);
("data", data => {
let str = String();
if (str.includes("running")) {
resolove();
}
console.(str));
});
("data", data => {
let str = String();
console.d(str));
});
<("close", () => {
});
});
}
// 启动electron
function startElectron() {
electronProcess = spawn(
electron vue教程electron,
[path.join(__dirname, "../electron/main.js")],
{
env: { // 环境变量配置
NODE_ENV: "development"
}
}
);
("data", data => {
console.(String()));
});
("data", data => {
console.String()));
});
<("close", () => {
// if (!electronRestart)
});
}
function init() { // 需要在vue项⽬启动后再启动electron  startVue().then(() => {
startElectron();
});
}
init();
复制代码
在package.json⽂件中增加script命令：
{
"dev": "node build/dev-runner"
}
复制代码
然后执⾏yarn dev命令，即可在启动vue项⽬后打开app窗⼝
监听⽂件变化重新启动
使⽤vue CLi创建的项⽬，修改代码后会⾃动重启，但是修改electron部分的代码，⽆法⾃动重启app，改怎么做呢?这⾥使⽤Node.js⾃带的fs模块就可以实现。 fs有⼀个watch⽅法，可以监听⽂件变化 ，
fs.watch(filename[, options][, listener])
复制代码
修改dev-runner.js⽂件，增加如下代码：
/**
* 监听electron⽂件夹下⽂件变化，重启app
*/
const fs = require("fs");
function watchFile() {
fs.watch(
path.join(__dirname, "../electron"),
{
recursive: true // 监控⼦⽬录
},
function(eventType, filename) {
// 是否是修改重启，修改electronProcess close事件监听，
// 去掉注释部分，防⽌⽂件监听重启事，进程退出
electronRestart = true;
if (electronProcess && electronProcess.pid) {
// 杀掉electronProcess进程
process.kill(electronProcess.pid);
}
electronProcess = null;
// 打印修改事件及⽂件名称
console.(eventType + ":" + filename));
// 重启app
startElectron();
console.("electron restart"));
// 使electronProcess ⾮正常close关闭事件⽣效
setTimeout(() => {
electronRestart = false;
}, 5000);
}
);
}
复制代码
此时修改electron⽬录下的所有⽂件，都会使app重新启动。
安装Vue Devtools扩展程序
安装electron-devtools-installer包
yarn add -D electron-devtools-installer
复制代码
修改main.js，在createWindow⽅法中增加如下代码：
const isDev = v.NODE_ENV === "development";
if (isDev) {
let installExtension = require("electron-devtools-installer");
installExtension
.default(installExtension.VUEJS_DEVTOOLS)
.then(() => {})
.catch(err => {
console.log("⽆法安装 `vue-devtools`: \n", err);
});
}
复制代码
保存后就可以看到安装的插件了
⾄此所有相关配置都基本完成了，我们可以开始写相关的功能了。
博客地址:
更多精彩，请关注我的！

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。