electron 在开发模式下，在电子版中加载Vue devtools

fumotvh3 于 2022-12-16 发布在 Electron

关注(0)|答案(1)|浏览(189)

我一直在寻找一种方法将Vue Devtools添加到我正在开发的电子应用程序中。我尝试了几种似乎已经过时的方法，最后成功地使用了这个包：
electron-devtools-installer，我将其作为DEV依赖项安装。
使用此代码：

import { app } from 'electron'
import installExtension from 'electron-devtools-installer';
const VUEJS3_DEVTOOLS = 'nhdogjmejiglipccpnnnanhbledajbpd';

...
app.whenReady().then(() => {
  installExtension(VUEJS3_DEVTOOLS)
    .then((name) => console.log(`Added Extension:  ${name}`))
    .catch((err) => console.log('An error occurred: ', err));
});

但由于这是一个DEV依赖项，因此应用程序由于生产中缺少包而无法加载。
我想知道是否有一种方法可以动态加载包/扩展，只有当不在生产中。

electron

来源：https://stackoverflow.com/questions/73855770/loading-vue-devtools-in-electron-in-development-mode

1条答案

按热度按时间

klsxnrf11#

我花了很多努力才弄明白这一点，因为这在任何地方都没有直接的文档，而且我缺乏加载ES6模块的经验，无法考虑尝试module.default.default。
这是在开发和生产情况下都能正常工作的代码：

app.whenReady().then(() => {
  if (process.env.DEBUGGING) // replace with whatever you use to check for dev env
    import('electron-devtools-installer')
      .then(mymodule => {
        const installExtension = mymodule.default.default; // Default export
        installExtension(mymodule.default.VUEJS_DEVTOOLS) // replace param with the ext ID of your choice
          .then((name) => console.log(`Added Extension:  ${name}`))
          .catch((err) => console.log('An error occurred: ', err));
      }).catch((err) => console.log('An error occurred: ', err));

}).catch((err) => console.log('An error occurred: ', err));

可能有一个更优雅的方法来做到这一点，但这是所有我需要的。我愿意听到改进这一点。
注意：请将mymodule.default.VUEJS_DEVTOOLS替换为任何其他有效的Chrome扩展ID。该软件包内置了一些常用的扩展ID：电子开发工具安装程序- GitHub

赞(0）回复(0）举报 2022-12-16

我来回答

electron 在开发模式下，在电子版中加载Vue devtools

1条答案

相关问题

热门标签

最新问答