李钟意讲前端

外观

咨询/接单/付费bug修复/学习交流群

精通 electron - 本地加载 Vue.js devtools 开发者插件 (vue3) ​

因为网络的原因，大部分人获取插件的时候会失败，这个教程介绍把 Vue.js devtools 插件下载到本地进行安装

前面的 1-3 步骤操作有困难也可以点击这里下载 vue_devtools.zip

1. 下载 Vue.js devtools CRX 文件 ​

  • 复制以下链接并粘贴到浏览器地址栏中，然后按 Enter 键来下载 Vue.js devtools 的 CRX 文件。
https://clients2.google.com/service/update2/crx?response=redirect&acceptformat=crx2,crx3&x=id%3Dnhdogjmejiglipccpnnnanhbledajbpd%26uc&prodversion=32

2. 保存 CRX 文件: ​

DANGER

这里小心 chrome 浏览器拦截（出现提示点击保留就可以）

  • 将下载的 CRX 文件保存到您的计算机上。

3. 解压 CRX 文件: ​

下载完成的文件一般是.crx 结尾的文件，例如： NHDOGJMEJIGLIPCCPNNNANHBLEDAJBPD_6_5_1_0.crx

使用 7-Zip 解压 出来

重命名为 vue_devtools

文件目录内容如下：

📂 vue_devtools
  📂 build
  📂 icons
  📂 popups
  📄 devtools-background.html
  📄 devtools.html
  📄 manifest.json
  📄 package.json

4. 在 Electron 中加载 Vue.js devtools: ​

Electron 官网文档 API 如何加载插件 https://www.electronjs.org/zh/docs/latest/breaking-changes#已移除-browserwindow-扩展-api

js
app.whenReady().then(() => {
  // 插件目录，直接拼接到目录即可
  const extensionFolder = path.join(__dirname, "../../vue_devtools");
  session.defaultSession
    .loadExtension(extensionFolder)
    .then((res) => {
      // console.log("res", res);
    })
    .catch((err) => {
      console.error("err", err);
    });
});

5. 注意必须是 URL 的方式加载才会出来 vue 插件 ​

正确的方式 ✔ ​

主进程加载 url

js
mainWindow.loadURL("http://127.0.0.1:5500/index.html");

渲染进程 index.html 代码示例如下 - 代码来源 Vue 官网 https://cn.vuejs.org/guide/quick-start.html#using-vue-from-cdn

html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <!-- https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP -->
    <!-- <meta http-equiv="Content-Security-Policy"
    content="default-src 'self'; script-src 'self'; style-src 'self' 'unsafe-inline'"> -->
    <link href="./src/renderer/styles.css" rel="stylesheet" />
    <title>Hello World!</title>
  </head>

  <body>
    <div id="app">{{ message }}</div>

    <script type="module">
      import {
        createApp,
        ref,
      } from "https://unpkg.com/vue@3/dist/vue.esm-browser.js";

      createApp({
        setup() {
          const message = ref("Hello Vue!");
          return {
            message,
          };
        },
      }).mount("#app");
    </script>
    <!-- You can also require other files to run in this process -->
    <script src="./src/renderer/renderer.js" type="module"></script>
  </body>
</html>

错误示例 ❌ - 下面是错误的方式，开发者工具不会出现 Vue ​

js
mainWindow.loadFile(path.join(__dirname, "..", "..", "index.html"));

6. 参考链接 ​

electron 官网重大更改 https://www.electronjs.org/zh/docs/latest/breaking-changes#已移除-browserwindow-扩展-api

electron-devtools-installer Vue3 插件下载地址 https://github.com/MarshallOfSound/electron-devtools-installer/blob/65ffa894bf635745d9399e79fb38682ccfd9c6e0/src/index.ts#L169

js
export const VUEJS_DEVTOOLS: ExtensionReference = {
  id: "nhdogjmejiglipccpnnnanhbledajbpd",
  electron: ">=1.2.1",
};

// 已废弃 - 无法访问
export const VUEJS3_DEVTOOLS: ExtensionReference = {
  id: "ljjemllljcmogpfapbkkighbhhppjdbg",
  electron: ">=1.2.1",
};