prerender-spa-plugin 預渲染外掛的使用說明

1：單頁面應用不利於SEO

SSH伺服器端渲染

預渲染**

由於頁面較少，且預渲染相對於SSH比較簡單，於是選擇預渲染頁面，預渲染可以極大的提高網頁訪問速度。而且配合一些meat外掛，基本可以 
滿足SEO需求


webpack 配置  
 // https://github.com/chrisvfritz/prerender-spa-plugin
new PrerenderSPAPlugin({
  staticDir: config.build.assetsRoot,
  // Routes to render
  routes: [ '/', '/login' ,  ],
  //壓縮html
  minify: {
    collapseBooleanAttributes: true,
    collapseWhitespace: true,
    decodeEntities: true,
    keepClosingSlash: true,
    sortAttributes: true
  },
  //這個沒有配置成功過  可能是
  // renderer: new Renderer({
  //   inject: {
  //     foo: 'bar'
  //   },
  //   headless: false,
  //   renderAfterDocumentEvent: 'render-event'
  // })
})

我用的腳手架 vue-cli webpack
打包目錄是public 裡面其他檔案是我們自己的一些東西不用管
之前打包後 是下面這樣的

image.png

配置後 注意 routes: [ '/', '/login' , ],

image.png

就是把你當前的路由換成靜態檔案而已