VUE的SEO的解決方案

方案1：預渲染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

 

 查找到說明成功了，恭喜你完成了。拍手慶祝吧！

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

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

優勢：

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

不足：

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