电子傀儡师出错。 “require 未定义”和“__dirname 未定义”

Posted 2023-03-22

【中文标题】电子傀儡师出错。 “require 未定义”和“__dirname 未定义”

【英文标题】：Error with electron's puppeteer. " equire is not defined" and "__dirname is not defined"

【发布时间】：2021-08-03 08:46:57

【问题描述】：

我正在尝试使用 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"
  ,

【参考方案1】：

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

像这样：

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

See here:

注意：要从 Renderer 进程访问 Node.js API，您需要将 nodeIntegration 首选项设置为 true，并将 contextIsolation 首选项设置为 false。

免责声明，打开 nodeIntegration 会在您的应用中打开安全漏洞。 See Zac's answer 了解如何修复它们。

【讨论】：

如果你愿意，你也可以看看这个。 ***.com/questions/67519649/…