vue内使用electron内的API

vue内使用electron内的API

方法一：

vue_electron.js

const electron = require('electron')

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

// main.js vue主文件
import Vue from 'vue'
import VueElectron from './vue_electron.js'
 
Vue.use(VueElectron)

// .vue 文件内使用如下：
export default {
  methods: {
    getName () {
      return this.$electron.remote.app.getName()
    }
  }
}

方法二：

// main.js electron主文件
import { app, BrowserWindow } from 'electron'

function createWindow() {
  mainWindow = new BrowserWindow({
    webPreferences: {
      nodeIntegration: true,  //web开启主进程中集成node
    }
  })
}
app.on('ready', createWindow)

.vue文件项目中引入：
(此引入打包成exe后生效) 浏览器调试vue页面时此功能无效

<script>
var remote = window.require('electron').remote
export default {}
</script>