vue/electron 版本12 创建及出现的问题

electron-vue创建
参考解决方案
1.使用vue-cli创建项目
vue create electron-vue-helloworld
2 使用electron-builder集成electron
vue add electron-builder
3 启动程序
npm run electron:serve

启动问题:
1. 渲染进程引入electron报错( __dirname is not defined)
解决方案
解决方法
在根目录创建vue.config.js

module.exports = {
    pluginOptions: {
        electronBuilder: {
            // nodeIntegration: true
            nodeIntegration: true
        }
    }
}

2 Electron 12+ 出现 require is not defined 报错解决
解决方案
在 Electron 12 及更高版本，设置了nodeIntegration: true及nodeIntegrationInWorker: true、nodeIntegrationInSubframes: true，渲染进程仍然可能出现require is not defined的报错。

这个报错还跟随有module is not defined或exports is not defined。

同样的报错在Electron 5+曾出现过，原因是发布v5.0.0的时候，官方将nodeIntegration默认值设置为了false（与此同时还将webviewTag设置为了false）。

近期，Electron 12.0.0 发布。修复了诸多异常。同时也将contextIsolation的默认值更改为true（详见：https://github.com/electron/electron/pull/27949）。

官方特地将此默认值修改作为重大更改。特地提示如下：

在Electron 12中，contextIsolation默认情况下将启用。若要还原以前的行为，contextIsolation: false必须在WebPreferences中指定。

我们建议启用contextIsolation以确保应用程序的安全。

另一个含义是，除非nodeIntegration值为true并且contextIsolation值为false，否则不能在渲染器过程中使用 require()。

有关更多详细信息，请参见：github.com/electron/electron/issues/23506

webPreferences API设置参考：https://www.electronjs.org/docs/api/browser-window

contextIsolation设置的意思是是否开启上下文隔离，意味着是否在独立 JavaScript 环境中运行 Electron API和指定的preload 脚本。关于因此导致的上下文隔离问题，参考：https://www.electronjs.org/docs/tutorial/context-isolation

也就是说，同时设置nodeIntegration: true及contextIsolation: false解决该问题！

备注: 创建项目的时候，出现的问题，作为笔记使用