简单粗暴、踩坑指南：vue内使用electron内的API，如CMD命令、更新等

Su、

网上找了很多资料，很多没头没尾的，最终根据多个资料理解整合了下，经过测试没问题，一套下来处理下来，你只要多去翻看electron的使用就可以了愉快的在vue中调用electron的API了
准备工作

[Asm] 纯文本查看 复制代码

#1.创建vue项目
vue create your-project
#2. 
#这里要多一个步骤，不然 add electron-builder的时候可能会报错
npm config edit  #增加三个源
 
#添加下面三个配置
#disturl=https://registry.npmmirror.com/-/binary/node
#electron_mirror=https://registry.npmmirror.com/-/binary/electron/
#registry=https://registry.npmmirror.com
#安装electron-builder打包插件，这里会自动安装electron
vue add electron-builder

修改background.js找到

[Asm] 纯文本查看 复制代码

    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: process.env.ELECTRON_NODE_INTEGRATION,
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })

修改为

[Asm] 纯文本查看 复制代码

    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: process.env.ELECTRON_NODE_INTEGRATION,
      nodeIntegration: true,//这里修改
      enableRemoteModule: true,//这里添加
      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
    }
  })

使用electronAPI方法一App.vue中直接使用

[Asm] 纯文本查看 复制代码

const electron = require('electron')
console.log(electron.remote.app.getName())

图就见方法二的使用中把
方法二新建scr/plugins/VueElectron.js

[Asm] 纯文本查看 复制代码

const electron = require('electron')
 
module.exports = {
  install: function (Vue) {
    Object.defineProperties(Vue.prototype, {
      $electron: {
        get () {
          return electron
        },
      },
    })
  },
}

在main.js中引用VueElectron.js

[Asm] 纯文本查看 复制代码

import VueElectron from '@/plugins/VueElectron'
Vue.use(VueElectron)

App.vue中使用

[Asm] 纯文本查看 复制代码

export default {
  created () {
    console.log(this.getName())
  },
  methods: {
    getName () {
      return this.$electron.remote.app.getName()
    }
  }
}

效果

RabbitBearLove

插个眼,学习下

jy262832680

学习一下

vigo2024

cy 学习学习