vue3使用预渲染prerender-spa-plugin达到SEO优化

实现SEO优化有四种方法：
1.SSR服务器渲染；
2.静态化；
3.预渲染prerender-spa-plugin；
4.使用Phantomjs针对爬虫做处理
此处只介绍第三种预渲染的方法，各种方法的利弊也不过多描述
如果只是用来改善少数营销页面（例如 /, /about, /contact 等）的 SEO，那么你可能需要预渲染。无需使用 web 服务器实时动态编译 HTML，而是使用预渲染方式，在构建时 (build time) 简单地生成针对特定路由的静态 HTML 文件。优点是设置预渲染更简单，并可以将你的前端作为一个完全静态的站点。
打包出来可以看见文件，打包出文件夹/index.html，例如：about => about/index.html，里面有html内容。
优势：

• 改动小，引入个插件就完事；

不足：

• 无法使用动态路由；
• 只适用少量页面的项目，页面多达几百个的情况下，打包会很很很慢；

1.下载prerender-spa-plugin

npm install --save prerender-spa-plugin

因为比较大，使用国内镜像下载比较慢，所以我试用了淘宝镜像cnpm

cnpm install --save prerender-spa-plugin

2.在vue.config.js里配置

const PrerenderSPAPlugin = require('prerender-spa-plugin');
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;
configureWebpack: {
	 plugins: [
  		new PrerenderSPAPlugin({
	 	// 生成文件的路径，也可以与webpakc打包的一致。
	 	// 下面这句话非常重要！！！
	 	// 这个目录只能有一级，如果目录层次大于一级，在生成的时候不会有任何错误提示，在预渲染的时候只会卡着不动。
			staticDir: path.join(__dirname,'dist'),
	  		// 对应自己的路由文件，比如a有参数，就需要写成 /a/param1。
	 		routes: ['/', '/team', '/analyst','/voter','/sponsor',],
	 		// 这个很重要，如果没有配置这段，也不会进行预编译
			renderer: new Renderer({
		         inject: {
					foo: 'bar'
		 		},
	   			headless: false,
			// 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
	 			renderAfterDocumentEvent: 'render-event',
				renderAfterTime: 10000,//超时时间
				timeout: 0,
				maxConcurrentRoutes: 20,//打包页面的最大数
				navigationParams: {
					timeout: 0
 				}
			})
		}),
 	]
}

3.在main.js里配置

new Vue({
  router,
  render: h => h(App),
  mounted () {
  	document.dispatchEvent(new Event('render-event'))
  }
}).$mount("#app");

打包过程中如果要生成的静态页面过多，就会报下面的错

Unable to prerender all routes!

我的项目是要打包18个，所以就出现了这样的问题，所以通过google之后，才有了以上的很多配置，这个插件 报错信息太单一，所以在排查问题的时候也很没头绪，不过办法还是有很多的。

---

项目上线后又遇到了新的问题（就因为是预渲染）
直接通过路由跳转的话，会先闪屏到首页一下再跳到路由页，用户体验很不好。
部分路由是没有做预渲染的，这部分路由在nginx配置的时候往往默认指向index.html比如类似下面的配置

	location / {
        try_files $uri $uri/index.html /index.html;
        #root   /static/front; #站点目录 已经配置了全局root
    }

由于对首页做了预渲染，所以index.html默认有很多内容的。
解决方案有两种：

1. 默认根节点隐藏，合适时机再显式出来：https://blog.csdn.net/Christiano_Lee/article/details/94569119。（感觉思路可行，但是本人没有实践，后面实践后再加上评论）
2. 新增一个空页面，路由为’/empty’，并为这个路由做预渲染，nginx配置中没有匹配的路由默认指向加载此页面。nginx配置改为

 location / {
       try_files $uri $uri/index.html /empty/index.html; # /index.html;
       #root   /static/front; #站点目录 已经配置了全局root
   }