在使用Nuxt之前，需要了解vue ssr（服務端渲染）基礎

什麼是SSR

Server Side Rendering(服務端渲染)

以前瀏覽器獲取資料都是後端渲染，就是瀏覽器請求後，後端通過處理渲染最終的.html檔案給瀏覽器。隨著js和ajax的興起，前端渲染增多。Node的出現，可以將渲染工作放在node服務端，服務端直接將html字串返回給瀏覽器。
服務端的渲染主要有利於SEO和首屏渲染快兩大好處。

SSR的優點

• 更好的 SEO
• 更快的內容到達時間

SSR方案的權衡之處

• 開發條件所限
• 涉及構建設定和部署的更多要求
• 更多的伺服器端負載

生命週期對比

vue的生命週期：

nuxt的生命週期應用一個完整的伺服器請求到渲染（或使用者通過切換路由渲染頁面）的流程：

區別

No.1-->路由

Nuxt 按照 pages 資料夾的目錄結構自動生成路由而 Vue 則需要在 router 下手動配置路由（除非自己配置一個自動生成路由的外掛或第三方庫）

No.2-->入口頁面

Nuxt頁面入口為 layouts/default.vue而vue頁面入口為 src/App.vue

No.3-->標籤

<nuxt-link></nuxt-link>

<router-view></router-view>

Nuxt中有一些標籤和寫法與Vue中的有一絲絲的不同，但是原理都是一樣的

No.4-->head中的mate標籤

vue中需要引入一個vue-mate的外掛

$ npm install vue-meta --save

然後再router.js中引入即可，就可以在全域性使用了

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Meta from 'vue-meta'

Vue.use(Router)
Vue.use(Meta)

export default new Router({
  //...
})

全域性使用方法：在任何一個component中都可以定義 metaInfo 屬性

 export default {
    name: 'App',
    metaInfo: {
      // 如果子component中沒有定義 metaInfo.title ，會預設使用這個title
      title: '首頁',
      titleTemplate: '%s | 我的Vuejs網站'
    }
  }
 

Nuxt中只需要加入head屬性即可

# 商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。
# For commercial use, please contact the author for authorization. For non-commercial use, please indicate the source.
# 協議(License)：署名-非商業性使用-相同方式共享 4.0 國際 (CC BY-NC-SA 4.0)
# 作者(Author)：十年後の八月
# 連結(URL)：https://catbk.cn/nuxt-js-customize-the-meta.html
# 來源(Source)：十年後の八月

export default {
  ...
 
  head() {
    return {
      title: this.$t('home.title'),
      meta: [
        { hid: 'description', name: 'description', content: this.$t('home.description') },
        { hid: 'og:site_name', property: 'og:site_name', content: 'hstream.io' },
        { hid: 'og:type', property: 'og:type', content: 'website' },
        { hid: 'og:title', property: 'og:title', content: this.$t('home.title') },
        { hid: 'og:description', property: 'og:description', content: this.$t('home.description') },
        { hid: 'og:url', property: 'og:url', content: 'https://xxxx.com' + this.$route.path },
        {
          hid: 'og:image',
          property: 'og:image',
          content: '/images/logo.png',
        },
      ],
    }
  },
}

No.5-->webpack配置

Nuxt內建Webpack，允許根據服務端需求，在 nuxt.config.js 中的build屬性自定義構建webpack的配置，覆蓋預設配置 vue關於webpack的配置存放在build資料夾下

--------------------------------------------結束----------------------------------------

謝謝大家，如需發現問題請大家積極提出聯絡我，vx:Grl_long