Nuxtを使用してサービス側レンダリングプロジェクトを開発する際に発生した問題点の整理(不定時更新)を記録する

2309 ワード

会社の公式サイトSEOの最適化の問題のため、サービス側でレンダリングする必要があります.prerender-spa-pluginプリレンダリングプラグインは需要を満たすことができません.この記録整理では、Nuxtがサービス側レンダリングプロジェクトを開発する際に発生する問題点(不定時更新)
1、掘金の上でいくつかとても良いNuxt教程の文章があって、いくつかの編を推薦します:https://juejin.im/post/58ff96...https://juejin.im/post/5bd3fb...https://juejin.im/post/5cc81e...https://www.jianshu.com/p/840...
2、windowオブジェクトを使用する時、ページはwindow is not definedを間違えて報告することがあり、解決方法:

// process.client       ，  window       
if (process.client) {
}

3、asyncData、fetch、validate使用範囲.ページコンポーネント、すなわちpagesディレクトリのコンポーネントのみ使用できます.componentsディレクトリの共通コンポーネントでは、この2つのライフサイクルメソッドは使用できません.参照: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の2つのライフサイクルで書き込まなければならない.この場合、pagesディレクトリのhomePageに限られる.vueのasyncData、fetchの2つのライフサイクルでダイナミックデータを取得し、propsまたはvuexを介してサブコンポーネントに渡すと、トップページ全体がWebソースコードを表示するときに、各サブコンポーネントのDOM構造が正常にダイナミックデータを挿入すると、SEO爬虫類は正常に這い出すことができ、他のページは操作と同じです.図1:図2:
4、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ルーティングフックを書く必要がなく、判断を処理し、ページも正常にジャンプして正しいデータを表示できることに気づきました.
5、エラー: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」に変更すると、エラーを解決できます.
6、vue-cliプロジェクトのようにpluginディレクトリの下にrouteを新規作成することもできます.jsファイルは、ここでグローバルガードを構成しnuxt.config.jsのpluginsを導入すれば有効になります.下図を参照してください.

pythonのchrとord

いくつかの小さな問題.