从零开发Electron-Vue (四) 最新2021electron-vue项目实际碰到的问题

你的名字 2022-10-29 04:30 126阅读 0赞

> 问题：在build成功后回过头来发现不能run electron:serve了，有俩个错误，第一个报DEVTOOLS相关的错

解决方法：在background.js里注释掉与VUEJS\_DEVTOOLS相关的东西

// import installExtension, { VUEJS_DEVTOOLS } from 'electron-devtools-installer'
    
    app.on('ready', () => {
      // 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()
    })
    
    再加一个
    const win = new BrowserWindow({
        webPreferences: {
          contextIsolation: false
        }
      })

>  第二个是eslint的

创建vue.config.js，增加

module.exports = {
        lintOnSave: false
    }

>  问题：在electron版本大于10.0.0当前项目，不能获取到shell等任何对象。。。

const shell = require('electron').shell;
    shell.openExternal('http://www.baidu.com');
    这样的写法会报shell是个undefined

解决方案：

const {shell} = window.require('electron').remote;
    shell.openExternal('http://www.baidu.com');
    然后在background.js里增加
    const win = new BrowserWindow({
        webPreferences: {
          nodeIntegration: true, // 是否集成 Nodejs
          enableRemoteModule: true,
        }

解决方案2：

将@vue/cli的版本降低为4.0.5后，渲染进程使用require(‘electron’)完美获取到相应对象
    vue/cli卸载命令
    npm uninstall -g @vue/cli
    vue/cli安装老版本命令
    npm install -g @vue/cli@4.0.5
    
    创建vue.config.js 文件，并增加以下内容：
    module.exports = {
    pluginOptions: {
        electronBuilder: {
          nodeIntegration: true,
          }
     }
    }

>  问题：将需要用到Node.js API和Electron API 的方法抽象到renderer.js, 从HTML中单独引入，也就避免了webpack对renderer.js进行处理。然后通过插件的方式引入到前端框架中，以Vue为例：

index.html

renderer.js

const electron = require('electron');
    const remote = electron.remote;
    const remoteApi = remote.require('./api.js');
    
    global.remoteApi = remoteApi;

Vue入口文件main.js

Vue.use({
        install (Vue, options) {
            //添加实例方法
            Vue.prototype.$remoteApi = global.remoteApi;
        }
    });