vue的seo方案 prerender-seo-plugin

利用vue cli 3.0安装脚手架。记住：勾选vue-router。

在vue.config.js里添加配置：

2，	var path = require('path')  
3，	const PrerenderSPAPlugin = require('prerender-spa-plugin');  
4，	const Renderer = PrerenderSPAPlugin.PuppeteerRenderer;  
5，	  
6，	module.exports = {  
7，	    configureWebpack: {  
8，	        plugins: [  
9，	            new PrerenderSPAPlugin({  
10，	                staticDir: path.join(__dirname, 'dist'),  
11，	                routes: ['/', '/about', '/contact'],  
12，	                renderer: new Renderer({  
13，	                    inject: {  
14，	                        foo: 'bar'  
15，	                    },  
16，	                    headless: false,  
17，	                    renderAfterDocumentEvent: 'render- event'  
18，	                })  
19，	            })  
20，	        ]  
21，	    }  
22，	}  

　main.js里添加配置： （标红部分）

1.	new Vue({  
2.	  router,  
3.	  store,  
4.	  mounted () {  
5.	    document.dispatchEvent(new Event('render-event'))  
6.	  },  
7.	  render: h => h(App)  
8.	}).$mount("#app");

    在执行yarn build后，在dist目录里就会生成对应路由的index页面。

                         

      如果需要验证，添加http-server。
            sudu yarn global add http-server
       然后在dist目录下，执行命令：http-server ，就可以看到预加载页面。