环境。vue-cli@3(vue,vue-router)prerender-spa-plugin@3.4.0foundation创建的空白项目constPrerenderSPAPlugin=require("prerender-spa-plugin");constRenderer=PrerenderSPAPlugin.PuppeteerRenderer;constpath=require("path");module.exports={configureWebpack:(config)=>{if(process.env.NODE_ENV!=="production")返回；return{plugins:[newPrerenderSPAPlugin({//必填-预渲染的webpack打包输出目录staticDir:path.join(__dirname,"dist"),//必填-预渲染的路由路径routes:["/","/关于”]，}），]，};},};Advancedconstpath=require('path')constPrerenderSPAPlugin=require('prerender-spa-plugin')constRenderer=PrerenderSPAPlugin.PuppeteerRenderermodule.exports={plugins:[...newPrerenderSPAPlugin({//必需-应用程序预渲染的webpack打包输出目录staticDir:path.join(__dirname,'dist'),//可选-应用程序应渲染的路径//（默认为staticDir。）outputDir:path.join(__dirname,'预渲染'),//可选-index.html位置indexPath:path.join(__dirname,'dist','index.html'),//必填-预浸染的路径routes:['/','/about','/some/deep/nested/route'],//可选-允许您在//将呈现的内容写入文件之前自定义HTML和输出路径。//renderedRoute可以被修改，它或一个等价物应该被返回。//renderedRoute格式：//{//route:String,//输出文件将在哪里结束（相对于outputDir）//originalRoute:String,//在重定向之前传递到渲染器的路由。//html:String,//此路由呈现的HTML。//outputPath:String//呈现的HTML将写入的路径。//}postProcess(renderedRoute){//忽略任何重定向。renderedRoute.route=renderedRoute.originalRoute//基本的空白删除。（不要在生产中使用它。）renderedRoute.html=renderedRoute.html.split(/>[\s]+<')//如果目录名称以.html文件扩展名结尾，则从输出路径中删除/index.html。//例如：/dist/dir/special.html/index.html->/dist/dir/special.htmlif(renderedRoute.route.endsWith('.html')){renderedRoute.outputPath=path.join(__dirname,'dist',renderedRoute.route)}returnrenderedRoute},//可选-使用html-minifier(https://github.com/kangax/html-minifier)//缩小生成的HTML文件。//选项参考：https://github.com/kangax/html-minifier#options-quick-referenceminify:{collapseBooleanAttributes:true,//忽略来自布尔属性的属性值collapseWhitespace:true,//折叠之间的空白nodesdecodeEntities:true,//尽可能使用Unicode字符keepClosingSlash:true,//在单个元素上保留尾部斜线sortAttributes:true//按频率对属性排序},//服务器配置选项。server:{//通常自动检测到空闲端口，但如果需要可以自定义Setport:8001},//要使用的实际预渲染器。（可以自己写，估计很难）//可用的渲染器：https://github.com/Tribex/prerenderer/tree/master/renderersrenderer:newRenderer({//optional-thenameofthe要添加到内容为“inject”的窗口对象的属性。injectProperty:'__PRERENDER_INJECTED',//可选-无论您希望应用程序通过'window.injectProperty'值访问什么。inject:{foo:'bar'},//optional-defaultis0,nolimit//路由是异步渲染的。//使用这个来限制并行渲染的路由数量。maxConcurrentRoutes:4,//optional-等待渲染，直到指定的事件被调度文档。//例如，使用`document.dispatchEvent(newEvent('custom-render-trigger'))`renderAfterDocumentEvent:'custom-render-trigger',//可选-等待渲染，直到使用`document检测到指定的元素。querySelector`renderAfterElementExists:'my-app-element',//可选-等待渲染直到经过一定时间。//弃用renderAfterTime:5000,//等待5s//其他人偶操作选项。//（参见此处：https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#puppeteerlaunchoptions）headless:false//渲染时显示浏览器窗口。对调试很有用。})})]}参考文章预渲染prerender-spa-plugin避坑指南
