Vue Devtools 不加载 Vue Electron Builder

Question

我正在创建一个 Electron/Vue 应用程序，但我无法在 Electron 应用程序中加载 Vue Devtools window。这是我第一次在 Vue 中使用 Electron，我不确定是否存在我不知道的依赖问题。

我遇到了 this Github 问题，但我的 Electron 和 vue-cli-plugin-electron 版本更高，并且已经包含正在讨论的更新代码。

我还尝试了以下代码片段（来自 here）：

win.loadURL(process.env.WEBPACK_DEV_SERVER_URL).then(() => {
  if (!process.env.IS_TEST) {
    setTimeout(() => win.webContents.openDevTools(), 5555)
  }
})

这导致一切都崩溃了。

我尝试的最后一件事是使用 vue invoke electron-builder 重新调用生成器，docs

中建议这样做

但是问题依然存在。有人可以看一下我的设置，如果有明显的错误请告诉我吗？

这是我的一部分 package.json:

  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "dev": "npm run electron:serve",
    "electron:build": "vue-cli-service electron:build",
    "electron:serve": "vue-cli-service electron:serve",
    "postinstall": "electron-builder install-app-deps",
    "postuninstall": "electron-builder install-app-deps",
    "start": "electron ."
  },
  "main": "background.js",
  "dependencies": {
    "@tailwindcss/postcss7-compat": "^2.0.2",
    "autoprefixer": "^9",
    "bcryptjs": "^2.4.3",
    "core-js": "^3.6.5",
    "electron": "^12.0.5",
    "jsstore": "^3.13.6",
    "postcss": "^7",
    "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.0.2",
    "vue": "^3.0.0",
    "vue-router": "^4.0.0-0",
    "vuex": "^4.0.0-0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-plugin-router": "^4.5.12",
    "@vue/cli-plugin-vuex": "^4.5.12",
    "@vue/cli-service": "~4.5.0",
    "@vue/compiler-sfc": "^3.0.0",
    "@vue/eslint-config-prettier": "^6.0.0",
    "babel-eslint": "^10.1.0",
    "electron": "^11.0.0",
    "electron-devtools-installer": "^3.2.0",
    "eslint": "^6.7.2",
    "eslint-plugin-prettier": "^3.3.1",
    "eslint-plugin-vue": "^7.0.0",
    "prettier": "^2.2.1",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6",
    "vue-cli-plugin-tailwind": "~2.0.6"
  }

这是我的 background.js 文件：

"use strict";

import { app, protocol, BrowserWindow } from "electron";
import { createProtocol } from "vue-cli-plugin-electron-builder/lib";
import installExtension, { VUEJS_DEVTOOLS } from "electron-devtools-installer";
const isDevelopment = process.env.NODE_ENV !== "production";

let win;
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([
  { scheme: "app", privileges: { secure: true, standard: true } },
]);

function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol("app");
    // Load the index.html when not in development
    win.loadURL("app://./index.html");
  }
}

// Quit when all windows are closed.
app.on("window-all-closed", () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== "darwin") {
    app.quit();
  }
});

app.on("activate", () => {
  // On macOS it's common to re-create a window in the app when the
  // dock icon is clicked and there are no other windows open.
  if (BrowserWindow.getAllWindows().length === 0) createWindow();
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      await installExtension(VUEJS_DEVTOOLS);
    } catch (e) {
      console.error("Vue Devtools failed to install:", e.toString());
    }
  }
  createWindow();
});

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === "win32") {
    process.on("message", (data) => {
      if (data === "graceful-exit") {
        app.quit();
      }
    });
  } else {
    process.on("SIGTERM", () => {
      app.quit();
    });
  }
}

Answer 1

不要使用超时，而是等待 dom-ready 事件。我想像这样设置它会让一切正常工作。

.

const {
    app,
    BrowserWindow,
} = require("electron");
const {
    default: installExtension,
    VUEJS_DEVTOOLS
} = require("electron-devtools-installer");
const isDev = process.env.NODE_ENV === "development";

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;

async function createWindow() {

    // Create the browser window.
    win = new BrowserWindow({
        width: 800,
        height: 600,
        title: "MyAppTitle",
        webPreferences: {
            devTools: isDev
        }
    });

    // Load app
    win.loadURL("index.html");

    // Only do these things when in development
    if (isDev) {

        // Errors are thrown if the dev tools are opened
        // before the DOM is ready
        win.webContents.once("dom-ready", async () => {
            await installExtension([VUEJS_DEVTOOLS])
                .then((name) => console.log(`Added Extension:  ${name}`))
                .catch((err) => console.log("An error occurred: ", err))
                .finally(() => {
                    win.webContents.openDevTools();
                });
        });
    }

    // Emitted when the window is closed.
    win.on("closed", () => {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        win = null;
    });
}

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.on("ready", createWindow);

// Quit when all windows are closed.
app.on("window-all-closed", () => {
    // On macOS it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform !== "darwin") {
        app.quit();
    }
});

Answer 2

Vue DevTools 的生产版本还不支持 Vue 3。

为了解决这个问题，您必须安装 Vue DevTools Beta。

替换为：

await installExtension(VUEJS_DEVTOOLS);

有了这个：

await installExtension({
  id: 'ljjemllljcmogpfapbkkighbhhppjdbg',
  electron: '>=1.2.1'
})

查看讨论 here。

更新

您现在也可以像这样使用 VUEJS3_DEVTOOLS 常量：

await installExtension(VUEJS3_DEVTOOLS);

Vue Devtools 不加载 Vue Electron Builder

Vue Devtools Not Loading With Vue Electron Builder

javascript

vue.js

electron

更新