电子木偶操纵者出错。 “要求未定义”和“__dirname 未定义”

Question

我试图在 npm 中使用 Vue CLI 包创建一个 Electron 应用程序，但在使用 puppeteer 的过程中，我收到以下错误消息。

Uncaught ReferenceError: __dirname is not defined
    at eval (webpack-internal:///./node_modules/electron/index.js:4)
    at Object../node_modules/electron/index.js (chunk-vendors.js:2014)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js&:114)
    at Module../node_modules/cache-loader/dist/cjs.js?!./node_modules/babel-loader/lib/index.js!./node_modules/cache-loader/dist/cjs.js?!./node_modules/vue-loader/lib/index.js?!./src/App.vue?vue&type=script&lang=js& (app.js:938)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (webpack-internal:///./src/App.vue?vue&type=script&lang=js&:2)
    at Module../src/App.vue?vue&type=script&lang=js& (app.js:1007)
vue.runtime.esm.js?2b0e:8440 You are running Vue in development mode.
Make sure to turn on production mode when deploying for production.
See more tips at https://vuejs.org/guide/deployment.html

作为我研究的结果，我发现一篇文章说我应该将 nodeIntegration 设置为 true，所以我决定尝试以下方法我将 background.js、App.vue 和 vue.config.js 中的 nodeIntegration 更改为 true，现在出现以下错误。我该如何解决这个问题？

Uncaught ReferenceError: require is not defined
    at eval (external "events"?7a7e:1)
    at Object.events (app.js:1123)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (emitter.js?a6bd:1)
    at Object../node_modules/webpack/hot/emitter.js (chunk-vendors.js:3793)
    at __webpack_require__ (app.js:849)
    at fn (app.js:151)
    at eval (dev-server.js?6895:50)
    at Object../node_modules/webpack/hot/dev-server.js (chunk-vendors.js:3782)

您使用的npm包版本如下

"dependencies": {
    "bootstrap-vue": "^2.21.2",
    "core-js": "^3.6.5",
    "electron": "^12.0.5",
    "electron-store": "^8.0.0",
    "multer": "^1.4.2",
    "nedb": "^1.8.0",
    "path": "^0.12.7",
    "puppeteer": "^9.1.1",
    "puppeteer-core": "^9.1.1",
    "puppeteer-in-electron": "^3.0.3",
    "readline": "^1.3.0",
    "require": "^2.4.20",
    "semantic-ui-vue": "^0.11.0",
    "vue": "^2.6.11",
    "vue-js-modal": "^2.0.0-rc.6",
    "vuejs-dialog": "^1.4.2"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
    "@vue/cli-service": "^4.5.13",
    "babel-eslint": "^10.1.0",
    "electron-devtools-installer": "^3.1.0",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.2.2",
    "node-sass": "^4.14.1",
    "sass-loader": "^10.1.1",
    "vue-cli-plugin-electron-builder": "~2.0.0-rc.6",
    "vue-template-compiler": "^2.6.11"
  },

Answer 1

确保在 BrowserWindow 设置中将 contextIsolation 设置为 false。

像这样：

new BrowserWindow({
    webPreferences:  {
        nodeIntegration:  true,
        contextIsolation: false
    },
});

See here:

NOTE: To access the Node.js API from the Renderer process, you need to set the nodeIntegration preference to true and the contextIsolation preference to false.

免责声明，打开 nodeIntegration 会在您的应用中打开安全漏洞。关于如何修复它们。

电子木偶操纵者出错。 “要求未定义”和“__dirname 未定义”

Error with electron's puppeteer. " equire is not defined" and "__dirname is not defined"

vue.js

electron

electron-builder

puppeteer