使用Vue + Webpack使用Puppeteer(无头Chrome)时的依赖性错误

我正在使用这两个库/模板:

https://github.com/GoogleChrome/puppeteer (无头Chrome)

https://github.com/vuejs-templates/pwa (使用Webpack和Express的Vue模板)。

这是代码:

export default { mounted () { const puppeteer = require('puppeteer') ;(async () => { const browser = await puppeteer.launch() const page = await browser.newPage() await page.goto('https://www.google.com/search?tbm=bks&q=%22this+is%22') const result = await page.evaluate(() => { const stats = document.querySelector('#resultStats') return stats.textContent }) console.log(result) await browser.close() })() } } 

我做npm install很多次,但我仍然有依赖错误:

没有find这些依赖关系:

  • ./node_modules/puppeteer/lib/Launcher.js中的child_process,./node_modules/puppeteer/node6/Launcher.js
  • fs in ./node_modules/extract-zip/index.js,./node_modules/extract-zip/node_modules/mkdirp/index.js和其他18个

要安装它们,你可以运行:npm install –save child_process fs听取http:// localhost:8080

Node:我也做了npm install --save child_process fs很多次。 同样的错误。

这似乎是webpack关于内置节点模块的抱怨。 尝试添加以下到您的webpackconfiguration…

 target: 'node' 

从webpack文档…

在上面的例子中,使用节点webpack将在类似于Node.js的环境中进行编译(使用Node.js要求加载块,而不是像fs或path一样接触任何内置模块)。


另外,你可以用下面的方法解决这个问题。

 node: { fs: 'empty', child_process: 'empty' } 

你是否想在浏览器中捆绑木偶使用? 这是一个特定于节点的模块,我怀疑它会在前端工作。 相反,你可能会试着理解为什么这个文件被捆绑在一起,如果这就是你打算做的。