開發環境啟動
為了方便開發，我們需要讓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"]);
vueProcess.stdout.on("data", data => {
let str = data.toString();
if (str.includes("running")) {
resolove();
}
console.log(chalk.green(str));
});
vueProcess.stderr.on("data", data => {
let str = data.toString();
console.log(chalk.red(str));
});
vueProcess.on("close", () => {
process.exit();
});
});
}
// 啟動electron
function startElectron() {
electronProcess = spawn(
electron,
[path.join(__dirname, "../electron/main.js")],
{
env: { // 環境變數配置
NODE_ENV: "development"
}
}
);
electronProcess.stdout.on("data", data => {
console.log(chalk.green(data.toString()));
});
electronProcess.stderr.on("data", data => {
console.log(chalk.red(data.toString()));
});
electronProcess.on("close", () => {
// if (!electronRestart)
process.exit();
});
}
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文件，
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.log(chalk.green(eventType + ":" + filename));
// 重啟app
startElectron();
console.log(chalk.green("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 = process.env.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);
});
}
複製程式碼儲存後就可以看到安裝的外掛了
至此所有相關配置都基本完成了，我們可以開始寫相關的功能了。 模板程式碼