prerender-spa-plugin预渲染：构建阶段生成匹配预渲染路径的 html 文件（注意：每个需要预渲染的路由都有一个对应的 html）。构建出来的 html 文件已有部分内容。
prerender-spa-plugin使用
-
安装prerender-spa-plugin
npm install prerender-spa-plugin --save
-
webpack.prod.config.js中引入
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
复制代码 plugins: [
new PrerenderSPAPlugin({
staticDir: path.join(__dirname, '../dist'),
// outputDir: path.join(__dirname, '../prerendered'),
indexPath: path.join(__dirname, '../dist', 'index.html'),
routes: ['/mobile/home.html', '/mobile/doctor_team.html', '/mobile/about.html'],
renderer: new Renderer({
inject: {
foo: 'bar'
},
headless: false,
renderAfterDocumentEvent: 'render-active'
// renderAfterElementExists: '.container',
// renderAfterTime: 5000
})
})
]
复制代码staticDir：代码打包目录
indexPath：模板页面
routes：要预渲染的页面路由
inject：默认挂在window.__PRERENDER_INJECTED对象上，可以通过window.__PRERENDER_INJECTED.foo在预渲染页面取值
headless：渲染时显示浏览器窗口。对调试很有用。
renderAfterDocumentEvent：等到事件触发去渲染，此处我理解为是Puppeteer获取页面的时机
renderAfterDocumentEvent 这个则很关键，这个是监听 document.dispatchEvent 事件，决定什么时候开始预渲染。需要在钩子函数中触发事件，如
new Vue({
el: '#app',
router,
render: h => h(App),
mounted () {
// You'll need this for renderAfterDocumentEvent.
document.dispatchEvent(new Event('render-active'))
}
});
复制代码renderAfterElementExists：等到dom元素出现时去渲染
renderAfterTime：5000ms后去渲染
- webpack打包编译
结合项目，执行打包编译命令
npm run build:prod
复制代码在dist目录下生成以下页面，虽然生成了两层目录，但是还是映射到'/mobile/home.html', '/mobile/doctor_team.html', '/mobile/about.html'
查看打包以后的页面，body内容已经渲染好了
启动http-server访问http://127.0.0.1:8080/mobile/about.html，效果跟正常访问一致
原理
prerender-spa-plugin 利用了 Puppeteer 的爬取页面的功能。 Puppeteer 是一个 Chrome官方出品的 headlessChromenode 库。它提供了一系列的 API, 可以在无 UI 的情况下调用 Chrome 的功能, 适用于爬虫、自动化处理等各种场景。它很强大，所以很简单就能将运行时的 HTML 打包到文件中。原理是在 Webpack 构建阶段的最后，在本地启动一个 Puppeteer 的服务，访问配置了预渲染的路由，然后将 Puppeteer 中渲染的页面输出到 HTML 文件中，并建立路由对应的目录。
具体代码可以结合render-puppeteer下的代码来看
在render.js中，启动本地服务，通过page.goto依次访问
http://localhost:8000/mobile/about.html，
http://localhost:8000/mobile/home.html
http://localhost:8000/mobile/doctor_team.html
通过page.content()获取html
总结
结合项目实践了下这个插件，也有不少坑
1.在config/index.js中assetsPublicPath原先写的是/dist,导致预渲染的页面body没有渲染出来，是空白页面，改成/就能预渲染出来，但是这样导致不需要预渲染的页面资源路径不对
2.该插件在webpack此版本下不支持路由懒加载，
"webpack": "^4.6.0",
网上提到npm i webpack@4.28.4可以解决，果然升级了webpack版本后支持路由懒加载
3.在需要请求动态数据的页面中，预渲染只能保证静态部分不更改，如果不想写死，要做动态数据代理，webpack的devserver代理数据无效，需要用nginx或者其他代理工具代理线上数据