Nuxt.js: ルーティング設定を自動生成できない

Question

静的ルート (/contact、/about,...) と動的ルート (/project /1<) を生成したいと考えています。 /code>、/project/2、...) なので、ユーザーがこれらのルートのいずれかにアクセスしているときにページを更新しても、ページは引き続き正しく動作します。

しかし、npm run generated を実行すると、/dist にある 生成されたルート "/" のみが取得されます。生成されたルートはフォルダーには表示されません。

使用した Nuxt.js バージョン: 2.14.7

universal と spa の両方のモードを試しましたが、どちらも機能しませんでした。

nuxt.config.js ファイルの先頭に次のコードを追加しました。

const axios = require('axios')

const DynamicRoutes = async () => {
  const Routes = await axios.get('http://my-project.com/wp/wp-json/projects/v1/posts')
    .then(res => res.data.map((project) => `/project/${project.ID}/${project.post_name}`))
    .then(res => res.concat(
      [
        '/について'、
        '/接触'、
        '/ポートフォリオ'
      】
    ))
  復路
}

次に、export デフォルトの {}:

生成: {
  ルート: 動的ルート
}、

Answer 1

まず第一に、構成に mode: 'universal' を追加する必要はありません。構成を簡素化するために、target: 'static' を追加するだけです。詳細については、https://nuxtjs.org/docs/2.x/features/deployment-targets/ をご覧ください。 ssr: true を使用すると、https://stackoverflow.com/a/65208463/8153537 で説明されているように、関連するフックを備えた完全に静的モードの Web サイトが取得されます。

次に、@nuxt/router モジュールを削除できます。私の要点をチェックしてください - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d。 Nuxt はフォルダー構造に基づいて必要なルートをすべて生成するため、追加の構成は必要ありません。

プロジェクト ページのルーティングについては、この要点を確認してください - https://gist.github.com/MexsonFernandes/d04495c86b115bbe29f26b36b0b35d2d#gistcomment-3555332。

Answer 2

router.mode='hash' は、generate.routes 構成と互換性がないようです。 router.mode が hash に設定されている場合、Nuxt ジェネレーターは generate.routes を無視し、 / のルートのみを作成します。これは次のとおりです。おそらく、ホームページは hash モードでのみ存在すると想定されているためです (つまり、index.html には、アプリケーションのすべてのルートを処理するルートが設定されています)。

このハッシュ モードは、router.js で設定されたモードとも競合しますが、本当にハッシュ ルーティングが必要な場合は、router.js## でのみ選択する必要があります # これを設定します# で generate.routes の処理を​​許可します。

また、

mode='universal' は ssr=true と同等であるため、この構成では ssr=false は使用できないことにも注意してください。モードの重要性。静的サイトを生成する場合は、asyncData() および fetch() フックを呼び出して静的ページ データを設定できるように、ssr=true が必要です。この設定により、dynamicRoutes() に /about、/contact、および /portfolio を追加する必要がなくなります。 # これらは生成されたルートにすでに含まれているためです。

GitHub PR