vue解决seo预渲染Prerender SPA Plugin

第一步：首先安装Prerender SPA Plugin 依赖

踩坑项：router.js中必须改为 mode: ‘history’ 模式，路由不支持使用懒加载

第二步：vue.config.js进行配置,对自己所需要预渲染的路由做处理

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
const path = require('path')

module.exports = {
 	configureWebpack: () => {
	    // 设置为在打包环境下运行
	    if (process.env.NODE_ENV !== 'production') return;
	    return {
	      //  主要部分
	      plugins: [
	        new PrerenderSPAPlugin({
	          staticDir: path.join(__dirname, 'dist'),
	          // 对应自己的路由文件，假设我要将以下test页面转成预渲染，比如test路由有参数，就需要写成 /test/param1。
	          routes: ['/', '/test','/test2','/test3'],
	          // 这个很重要，如果没有配置这段，也不会进行预编译
	          renderer: new Renderer({
	            inject: {
	              foo: 'bar'
	            },
	            headless: false,
	            renderAfterTime: 5000 
	            // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，两者的事件名称要对应上。
	            renderAfterDocumentEvent: 'render-event'
	          })
	        })
	      ]
	   } 
  },
}

最后在main.js中修改

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