环境配置:

vue3+Electron^12.0.0


问题:

在渲染进程中添加ipcRenderer和remote等模块时报错

import { ipcRenderer } from 'electron'
export default {
    methods: {
        close() {
            ipcRenderer.send('close')
        },
        minisize() {
            ipcRenderer.send('minimize')
        },
        restore() {
            ipcRenderer.send('restore')
        },
        maxsize() {
            ipcRenderer.send('maximize')
        }
    }
}

解决方法:

1、在vue.config.js替换成以下内容

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: false,
  configureWebpack: {
    externals: {
      'electron': 'require("electron")'
    },
  },
})

2、修改background.js, 加载beta版本的vue-devtools

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    try {
      // VUEJS_DEVTOOLS ---- vue3 用不了
      const { default: installExtension, } = require('electron-devtools-installer')
      // 使用beta版 vue-devtools
      // 参考链接 https://github.com/vuejs/vue-devtools/issues/1279
      // https://v3.vuejs.org/guide/migration/introduction.html#devtools-extension
      // https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg
      var vue_devtools_beta = { id: "ljjemllljcmogpfapbkkighbhhppjdbg", electron: ">=1.2.1" }
      var result = await installExtension(vue_devtools_beta)
      if (result) {
        console.log("success load : " + result)
      }
    } catch (e) {
      console.error('Vue Devtools failed to install:', e.toString())
    }
  }
  createWindow()
})

3、这时,成功编译:但出现新的错误Uncaught ReferenceError: require is not defined,而且页面渲染不出来

 4、修改background.js的createWindow方法

async function createWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 800,
    height: 600,
    frame:false,
    webPreferences: {
      
      // Use pluginOptions.nodeIntegration, leave this alone
      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
      nodeIntegration: true,
//出现这个问题是因为官方为了安全性,将 electron v12.0.0 的 contextIsolation 的默认值改了。
//所以今后要在渲染进程里调用 require 的话,还需要加上 contextIsolation: false 。
	contextIsolation: false,
	enableRemoteModule: true
    }
  })

最后:

输入npm run electron:serve
成功运行

 参考文章:
 

解决electron10.1.3+vue3无法显示vue-devtools问题_「已注销」的博客-CSDN博客

electron Error: Can't resolve 'fs'(编译报错)_舜岳的博客-CSDN博客

解决 electron require()报错:Uncaught ReferenceError: require is not defined_雪野Solye的博客-CSDN博客_electron require报错

Vue 创建项目后没有 webpack.config.js(vue.config.js) 文件_卡尔特斯的博客-CSDN博客_webpack.config.js没有

Logo

前往低代码交流专区

更多推荐