預渲染prerender-spa-plugin

如果你只是用來改善少數營銷頁面（例如 /, /about, /contact 等）的 SEO，那麼你可能需要預渲染。無需使用 web 伺服器實時動態編譯 HTML，而是使用預渲染方式，在構建時 (build time) 簡單地生成針對特定路由的靜態 HTML 檔案。優點是設定預渲染更簡單，並可以將你的前端作為一個完全靜態的站點。

優勢：

• 改動小，引入個外掛就完事；

不足：

• 無法使用動態路由；
• 只適用少量頁面的專案，頁面多達幾百個的情況下，打包會很很很慢；

解決方案如下：

1.首先需要安裝prerender-spa-plugin和vue-meta-info，prerender-spa-plugin解決打包多個頁面，vue-meta-info解決SEO的問題

npm install --save prerender-spa-plugin

npm install --save vue-meta-info

2.在專案中找到webpack.prod.conf.js，有可能這個檔名不同，這個時候你需要根據你的命令列來找到相關檔案

在此檔案中新增如下程式碼

貼上相關程式碼

const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
      // Required - The path to the webpack-outputted app to prerender.
      staticDir: path.join(__dirname, '../dist'),
      // Required - Routes to render.
      routes: [ '/', '/cart', '/list'],
      renderer: new Renderer({
        inject: {
          foo: 'bar'
        },
        headless: false,
        // 在 main.js 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
        renderAfterDocumentEvent: 'render-event'
      })
}),

3.在VUE專案中新增相關程式碼

貼上相關程式碼，

new Vue({
  el: '#app',
  router,
  store,
  render: h => h(App),
  mounted () {
    // You'll need this for renderAfterDocumentEvent.
    
    document.dispatchEvent(new Event('render-event'))
    }
}).$mount('#app')

4.到這裡就完成打包成多個頁面，執行打包命令

npm run build

5.打包完成會出現相關資料夾，每個檔案都有相關的index,html說明打包成功

5接下去就是解決SEO的問題，匯入vue-meta-info，然後使用

6然後在需要的元件中新增如下程式碼

貼上相關程式碼

metaInfo: {
    title: '我是hello頭', // set a title
    meta: [{             // set meta
      name: 'keyWords',
      content: '我是hello關鍵字'
    },
    {
      name: 'description',
      content: '我是hello描述'
    }]
 }

7.再執行打包程式，這時候你再相關頁面中查詢相關meta

靜態化靜態化是Nuxt.js打包的另一種方式，算是 Nuxt.js 的一個創新點，頁面載入速度很快。

在 Nuxt.js 執行 generate 靜態化打包時，動態路由會被忽略。

優勢：

• 純靜態檔案，訪問速度超快；
• 對比SSR，不涉及到伺服器負載方面問題；
• 靜態網頁不宜遭到黑客攻擊，安全性更高。

不足：

• 如果動態路由引數多的話不適用。