Electron搭配Vue使用

搭建环境

因为 Vite 的工具链还不是特别完善，所以这里还是采用 Vue-cli 来创建项目，如何创建就不说了，主要是注意要添加个关于 Electron 的插件 vue-cli-plugin-electron-builder 注意：这个插件是重新下载一个 Electron 所以安装时巨慢

进去之后会报一个错，会要求安装 electron-devtools-installer，这个依赖就不用装了，这玩意的作用是安装 Vue 的调试工具（Chrome 的插件），但是挂了代理也用不了，经排查发现这个添加依赖的操作 Electron 更换了 api 而这个依赖使用的还是旧版 api，如果要使用那个插件则手动安装

首先删掉 background.ts 里面关于这个依赖的内容，然后下载 vue-devtools 插件如果要下载离线安装包在这里搜索

下载好 vue-devtools.crx 后，把文件名后缀改成 zip 后解压到自己指定目录下（例如 ./devTools）

app.on("ready", async () => {
  // addDevToolsExtension 已经过期了现在使用下面这个
  await session.defaultSession
    .loadExtension(path.join(__dirname, '../devTools'))
    .then(res => {
      console.log(res);
    })
    .catch(err => {
      console.log(err);
    })
  createWindow();
});

安装不了插件且看到这个 issue React DevTools and Redux DevTools tabs sometimes not appearing Electron@9.0.0 感觉没有办法了，突然看到这个贴子：解决electron10.1.3+vue3无法显示vue-devtools问题

发现 Vue3 需要改成 Beta 版本的 devtools（不过关闭了调试窗口再打开这个 VueDevTools 就无法正常显示了）

然后 package.json 的这两个命令是可以删掉了，因为这是浏览器上的启动命令，现在使用 Electron 后就无需再用这个两个命令了

"serve": "vue-cli-service serve",
"build": "vue-cli-service build",

如果要使用 NodeJS 的模块还需要在 vue.config.js 文件里开启（没有就新建一个文件），具体配置细节可以看这个 vue-cli-plugin-electron-builder 插件的 Node Integration 部分文档

// 原本开启 nodeIntegration 的地方被这个插件使用了全局变量，所以使用这个插件提供的方式开启
module.exports = {
  pluginOptions: {
    electronBuilder: {
      nodeIntegration: true
    }
  }
}

注：建议使用这种方式开启，因为使用这种方式还能支持 ES6 的模块语法 import-from

如果要使用 vue-router 还需要改一下路由模式

If using Vue 2:

export default new Router({
- mode: 'history',
+ mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})

If using Vue 3:

const router = createRouter({
- history: createWebHistory(),
  // (you will need to import these functions from 'vue-router')
+ history: process.env.IS_ELECTRON ? createWebHashHistory() : createWebHistory(),
})

更多问题可以看官网上的这个常见问题

搭建环境​

References​

搭建环境

References