vue spa如何做seo優化

突然來了一個需求，對已有的項目做SEO優化，WHAT？ 總所周知，spa對seo不夠優化，因而官方考慮到直接使用ssr

一個不算解決辦法的辦法prerender-spa-plugin

// build/webpack.prod.conf.js
const PrerenderSPAPlugin = require('prerender-spa-plugin')
const Renderer = PrerenderSPAPlugin.PuppeteerRenderer
new PrerenderSPAPlugin({
  // 生成文件的路徑，也可以與webpakc打包的一致。
  // 下面這句話非常重要！！！
  // 這個目錄只能有一級，如果目錄層次大於一級，在生成的時候不會有任何錯誤提示，在預渲染的時候只會卡着不動。
  staticDir: path.join(__dirname, '../dist'),

  // 對應自己的路由文件，比如index有參數，就需要寫成 /index/param1。
  routes: ['/opty', '/customer', '/channelVendor', '/contract_type', '/contract', '/bill'],

  // 這個很重要，如果沒有配置這段，也不會進行預編譯
  renderer: new Renderer({
    inject: {
      foo: 'bar'
    },
    headless: false,
    // 在 main.js mounted 中 document.dispatchEvent(new Event('render-event'))，兩者的事件名稱要對應上。
    renderAfterDocumentEvent: 'render-event'
  })
})

// main.js
new Vue({
  router,
  store,
  render: h => h(App),
  mounted () {
    document.dispatchEvent(new Event('render-event'))
  }
}).$mount('#app')

// router 需要使用history
new Router({
  mode: 'history',
  routes
})

參考資料1，2

總結

• 打包時間真心長，很不適合做seo
• 只適合簡單處理，若是項目復雜，路由較多，便不是很適合了