在使用vue+electron-builder时遇到的问题

1.在.vue文件中无法使用electronApi的问题

1.0版本

// 在src文件下新建 vue-electron.js文件
const electron = require('electron');

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

// 在main.js文件中引入
import VueElectron from './vue-electron'
Vue.use(VueElectron)

vue.config.js配置防止浏览器报错'__dirname' is not defind

// 在项目根目录新建vue.config.js文件
module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
}

2.0
更简单的方法

// 在main.js中引入
import electron from 'electron'
Vue.prototype.$electron = electron;

vue.config.js配置防止浏览器报错'__dirname' is not defind

// 在项目根目录新建vue.config.js文件
module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true
        }
    }
}

此时应该可以在.vue文件中访问到this.$electron对象了，注意：一定要重启项目，vue.config.js配置的文件才能生效

2.在.vue文件中使用this.$electron.remote字段为undefined

需要“显”式的申明 enableRemoteModule: true
在项目目录src下的background.js中修改

// 添加前
const win = new BrowserWindow({
        width: 400,
        height: 400,
        frame: false,
        resizable: 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: process.env.ELECTRON_NODE_INTEGRATION
        }
    });

// 添加后
const win = new BrowserWindow({
        width: 400,
        height: 400,
        frame: false,
        resizable: 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: process.env.ELECTRON_NODE_INTEGRATION,
            enableRemoteModule: process.env.ELECTRON_NODE_INTEGRATION
        }
    });

在vue.config.js中添加

module.exports = {
    pluginOptions: {
        electronBuilder: {
            nodeIntegration: true,
            enableRemoteModule: true
        }
    }
}

此时应该可以在.vue文件中访问到this.$electron.remote.XXX任何electron主进程对象了，如：this.$electron.remote.BrowserWindow

初学者，不喜勿喷，正在努力学习中，后续更新。。