错误 [prerender-spa-plugin] - 无法预渲染所有路由
Posted
技术标签:
【中文标题】错误 [prerender-spa-plugin] - 无法预渲染所有路由【英文标题】:ERROR [prerender-spa-plugin] - Unable to prerender all routes 【发布时间】:2019-12-17 03:47:35 【问题描述】:我在使用 Laravel 5.7 和 Vue 2.6 实现 prerender-spa-plugin 时遇到了问题:
Error: Child compilation failed:
Entry module not found: Error: Can't resolve '/mnt/c/laragon/w ww/<project-folder>/resources/views/index.html' in '/mnt/c/laragon/ www/<project-folder>':
Error: Can't resolve '/mnt/c/laragon/www/<project-folder>/resources /views/index.html' in '/mnt/c/laragon/www/<project-folder>'
- compiler.js:79 childCompiler.runAsChild
[<project-folder>]/[html-webpack-plugin]/lib/compiler.js:79:16
- Compiler.js:343 compile
[<project-folder>]/[webpack]/lib/Compiler.js:343:11
- Compiler.js:671 hooks.afterCompile.callAsync.err
[<project-folder>]/[webpack]/lib/Compiler.js:671:15
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[<project-folder>]/[tapable]/lib/Hook.js:154:20
- Compiler.js:668 compilation.seal.err
[<project-folder>]/[webpack]/lib/Compiler.js:668:31
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[<project-folder>]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1385 hooks.optimizeAssets.callAsync.err
[<project-folder>]/[webpack]/lib/Compilation.js:1385:35
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[<project-folder>]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1376 hooks.optimizeChunkAssets.callAsync.err
[<project-folder>]/[webpack]/lib/Compilation.js:1376:32
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[<project-folder>]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1371 hooks.additionalAssets.callAsync.err
[<project-folder>]/[webpack]/lib/Compilation.js:1371:36
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[<project-folder>]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1367 hooks.optimizeTree.callAsync.err
[<project-folder>]/[webpack]/lib/Compilation.js:1367:32
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[<project-folder>]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1304 Compilation.seal
[<project-folder>]/[webpack]/lib/Compilation.js:1304:27
- Compiler.js:665 compilation.finish.err
[<project-folder>]/[webpack]/lib/Compiler.js:665:18
- Compilation.js:1224 hooks.finishModules.callAsync.err
[<project-folder>]/[webpack]/lib/Compilation.js:1224:4
- Hook.js:154 AsyncSeriesHook.lazyCompileHook
[<project-folder>]/[tapable]/lib/Hook.js:154:20
- Compilation.js:1216 Compilation.finish
[<project-folder>]/[webpack]/lib/Compilation.js:1216:28
- Compiler.js:662 hooks.make.callAsync.err
[<project-folder>]/[webpack]/lib/Compiler.js:662:17
- Compilation.js:1148 _addModuleChain
[<project-folder>]/[webpack]/lib/Compilation.js:1148:12
- Compilation.js:1007 errorAndCallback.bail.err
[<project-folder>]/[webpack]/lib/Compilation.js:1007:6
- Compilation.js:1038 moduleFactory.create
[<project-folder>]/[webpack]/lib/Compilation.js:1038:14
- NormalModuleFactory.js:401 factory
[<project-folder>]/[webpack]/lib/NormalModuleFactory.js:401:22
- NormalModuleFactory.js:130 resolver
[<project-folder>]/[webpack]/lib/NormalModuleFactory.js:130:21
- NormalModuleFactory.js:224 asyncLib.parallel
[<project-folder>]/[webpack]/lib/NormalModuleFactory.js:224:22
- async.js:2830
[<project-folder>]/[webpack]/[neo-async]/async.js:2830:7
- async.js:6877
[<project-folder>]/[webpack]/[neo-async]/async.js:6877:13
我正在关注关于 Vue 和 Laravel 实现部分的博客教程:https://vuejsdevelopers.com/2017/04/01/vue-js-prerendering-node-laravel/
并设置我的 webpack.config.js(在项目根文件夹上(从 laravel-mix webpack.config.js 复制的内容 + 教程中的代码)):
var path = require('path')
var webpack = require('webpack')
var HtmlWebpackPlugin = require('html-webpack-plugin')
var PrerenderSPAPlugin = require('prerender-spa-plugin')
var Renderer = PrerenderSPAPlugin.PuppeteerRenderer
/**
* As our first step, we'll pull in the user's webpack.mix.js
* file. Based on what the user requests in that file,
* a generic config object will be constructed for us.
*/
let mix = require('./node_modules/laravel-mix/src/index');
let ComponentFactory = require('./node_modules/laravel-mix/src/components/ComponentFactory');
new ComponentFactory().installAll();
require(Mix.paths.mix());
/**
* Just in case the user needs to hook into this point
* in the build process, we'll make an announcement.
*/
Mix.dispatch('init', Mix);
/**
* Now that we know which build tasks are required by the
* user, we can dynamically create a configuration object
* for Webpack. And that's all there is to it. Simple!
*/
let WebpackConfig = require('./node_modules/laravel-mix/src/builder/WebpackConfig');
module.exports = new WebpackConfig().build();
module.exports.plugins.push(
new HtmlWebpackPlugin(
template: Mix.paths.root('resources/views/index.html'),
inject: false
)
);
module.exports.plugins.push(
new PrerenderSPAPlugin(
staticDir: path.join(__dirname, 'dist'),
routes: [ '/' ]
)
);
它在 ./public 文件夹上生成 index.html,但内容是上面的错误。
【问题讨论】:
【参考方案1】:好的,我通过渲染更少的页面解决了这个问题。连接不良似乎存在问题,在我的情况下这是不可能的。所以我认为要渲染的页面越少就可以解决问题,它为我做到了。
我在 VueCLI 中使用 vuejs,所以我只是在 vue.config.js 中注释掉了几页,瞧,它起作用了。
【讨论】:
【参考方案2】:用途:
headless: true
参考: https://juejin.cn/post/6844904178326700045#comment
【讨论】:
请在您的回答中添加更多解释以上是关于错误 [prerender-spa-plugin] - 无法预渲染所有路由的主要内容,如果未能解决你的问题,请参考以下文章
vue项目使用 prerender-spa-plugin 预渲染
vue 项目预渲染(prerender-spa-plugin)
webpack5, vue3,vue-cli5 使用 prerender-spa-plugin 预渲染