Electron + Vue 开发的时候，在 App 里加载 DevTools | Becomin' Charles

[giscus[bot]]

Electron + Vue 开发的时候，在 App 里加载 DevTools | Becomin' Charles

使用 Electron 开发的时候，因为其原理是 Node.js + Chrome 内核，所以在 Chrome 能用的开发工具，在 Electron 开发的时候也可以用，这就带来了很好的开发体验。 这是一个巨大的优势，可以抵销很多 electron 平台的劣势。

https://blog.charlestang.org/2024/electron-vue-load-devtools/

[qiaolao233]

你好我在 electron 31.3.1 加载 vue-tools 加载不出来

[qiaolao233]

const { app, BrowserWindow, session } = require("electron");
const path = require("path");
const os = require("os");

const vueDevToolsPath = path.join(
os.homedir(),
"AppData/Local/Google/Chrome/User Data/Default/Extensions/nhdogjmejiglipccpnnnanhbledajbpd/6.1.4_0"
);

void (async () => {
await app.whenReady();
const mainWindow = new BrowserWindow({
webPreferences: {
sandbox: true,
contextIsolation: true,
},
});
// mainWindow.loadFile(path.join(process.cwd(), "src/index.html"));
await mainWindow.loadURL("http://127.0.0.1:5500/src/index.html");
mainWindow.webContents.openDevTools();
await new Promise((resolve) => {
setTimeout(resolve, 3000);
});
const res = await session.defaultSession.loadExtension(vueDevToolsPath);
console.log(res, ---------------->res);
})();

[qiaolao233]

麻烦你告诉我一下你使用的electron 版本 和 vue-devtools 版本 可以吗