記錄使用Nuxt開發服務端渲染項目時遇到的問題難點整理（不定時更新）

由於公司官網SEO優化問題，必需要用服務端渲染，prerender-spa-plugin預渲染插件不能知足需求。在此記錄整理，Nuxt開發服務端渲染項目時遇到的問題難點（不定時更新）

一、掘金上有一些很不錯的Nuxt教程文章，推薦幾篇：
https://juejin.im/post/58ff96...
https://juejin.im/post/5bd3fb...
https://juejin.im/post/5cc81e...
https://www.jianshu.com/p/840...

二、在使用window對象時，頁面有時會報錯window is not defined，解決方法：

//用process.client判斷是否客戶端，包着window對象的代碼就行
if (process.client) {
}

三、asyncData、fetch、validate使用範圍。
只能在頁面組件使用，即pages目錄下的組件，components目錄下的公共組件不可使用這兩個生命週期方法，參考：https://zh.nuxtjs.org/api/。
若是頁面模塊不少，好比像我vue-cli項目那樣（參考下圖1），首頁分了7個子組件，若是在nuxt裏也這麼Ctrl c - Ctrl v把文件夾照搬過去確定是不行的，那這個7個子組件只能放到nuxt項目的根目錄下的components目錄裏（參考下圖2），而後在pages目錄下的homePage.vue父組件里正常引入這7個子組件，若是要考慮SEO，這些子組件從接口獲取的數據必需要在asyncData、fetch這兩個生命週期裏寫入，那麼這種狀況下，只能在pages目錄下的homePage.vue的asyncData、fetch這兩個生命週期裏獲取好動態數據，並經過props或vuex傳給子組件，這樣操做下來，整個首頁在查看網頁源代碼時，各個子組件的DOM結構都是正常插入動態數據了，那麼SEO爬蟲就能夠正常爬取到，其餘頁面相似操做同理。
圖1:

圖2:

四、vue-cli建立的項目，即客戶端渲染，在詳情頁類型的文章頁面中，若是右側列表有同類型的文章，那麼在點擊跳轉路由時，須要用到beforeRouteUpdate，判斷from來源是否是本路由，是的話則把詳情id更新爲to路由對象裏的id便可，參考Vue Router官方文檔：https://router.vuejs.org/zh/g...

//個人代碼是這樣
beforeRouteUpdate(to, from, next){
    next();
    // console.log(to, from, next)

    if(from.path.indexOf('NewsDetails') != -1){
        this.newsId = to.params.newsId;
        //更新新聞資訊詳情數據
        this.getNewsDetailsData();
    }
},

而Nuxt服務端渲染的項目，我作到這個功能點時，發現不須要寫beforeRouteUpdate路由鉤子，處理判斷，頁面也能正常跳轉展現正確的數據。

五、報錯：Computed property "xxx（此處是vuex state的一個變量名）" was assigned to but it has no setter.
是由於vuex是單項流，v-model是雙向綁定。
我這個報錯的業務場景是，公共組件login、register的modal框，控制是否顯示隱藏，個人項目使用的是antD vue UI組件庫，modal組件的參數由 v-model="loginModalShow" 改成 :visible="loginModalShow" 便可解決報錯。

六、也能夠像vue-cli項目同樣，在plugin目錄下新建route.js文件，在這裏配置全局守衛，而後在nuxt.config.js裏的plugins引入好就能夠生效了，參考下圖。