在electron6.0和9.0中使用vue插件

最新推荐文章于 2023-10-12 11:51:12 发布

原创最新推荐文章于 2023-10-12 11:51:12 发布 · 239 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#electron

electron 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何在Electron 6.0和9.0版本中集成Vue开发者工具。主要内容包括下载并解压插件、针对不同版本的Electron进行背景脚本的修改等步骤。文中还详细说明了安装过程中的注意事项。

在electron6.0和9.0中使用vue插件

下载插件压缩包进行解压

如果已经在谷歌中安装了则直接通过插件ID找到插件文件夹拷贝文件夹即可

修改`background.js`

6.0

const path = require('path')

// 需要在ready中安装插件 错误需要捕获 否则程序终止
app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    try {
      // 新增的：安装vue-devtools
      BrowserWindow.addDevToolsExtension(path.resolve(__dirname, '../devTools/vue-devtools'))
    } catch (error) {
      console.error('Vue Devtools failed to install:', error.toString())
    }
  }
  ...
})

9.0

app.on('ready', async () => {
  // 加载插件
  if (process.env.NODE_ENV === 'development') {
    try {
    // 自己解压的插件会又key不一的控制台警告，是因为谷歌升级了安全策略 不需要管它 把开发者工具再打开就能看到vue扩展 (猜测)
     // https://github.com/electron/electron/issues/23662
      await session.defaultSession.loadExtension(path.resolve(__dirname, './../../devTools/vue-devtools'))
    } catch (error) {
      console.log(error)
    }
  }