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 ，就能夠看到預加載頁面。