質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

MicroCMS

MicroCMSとは、APIベースのヘッドレスCMSです。日本製のため、デフォルトで日本語に対応しており、サポートも豊富。管理画面でも作成したコンテンツなどが見やすくシンプルで、APIの管理がしやすい点も特徴です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

874閲覧

microCMSで投稿した記事を見れない場合がある

Koock

総合スコア32

Nuxt.js

Nuxt.jsは、ユニバーサルなSPAが開発可能なVue.jsベースのフレームワーク。UIの描画サポートに特化しており、SSRにおけるサーバーサイドとクライアントサイドのUIレンダリングなどさまざまな機能を持ちます。

Netlify

Netlifyは、静的サイトを超高速でホスティングできる高機能なWebサービスです。WordPressといった動的処理を必要としないLPなどの静的Webサイトを公開することが可能。カスタムドメイン設定や無料SSL証明書などの多くの機能を無料で使用できます。

MicroCMS

MicroCMSとは、APIベースのヘッドレスCMSです。日本製のため、デフォルトで日本語に対応しており、サポートも豊富。管理画面でも作成したコンテンツなどが見やすくシンプルで、APIの管理がしやすい点も特徴です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2022/07/19 23:07

前提

Nuxt+Netlify+microCMSを使ったサイトを立ち上げました。
時々ですが、microCMSで掻いた記事を見ようとすると「404 Not Found」になります。
Nuxtの構成は
'/' はindex.vue
microCMSで掻いた記事の一覧ページが '/blog' で、blog.vue
で作っています。
メニューで記事一覧ページを選ぶとURLは次の通りです。
https://smalltrip.netlify.app/blog
これは正常で、記事の中から1つを選ぶとURLは(例えば)
https://smalltrip.netlify.app/article/xq1c_77vg
となり正常に記事を閲覧できます。
異常時(どんな時な発生するかつかめません)のURLは
https://smalltrip.netlify.app/blog/
で、URLの最後に '/' が付くのです。
試しに、正常時の記事一覧ページのURLに手動で '/' を付けてENTERを押します。
記事一覧ページは変化しません。そこで同様に1つを選ぶとURLは
https://smalltrip.netlify.app/blog/article/xq1c_77vg
となり、「404 Not Found」になります。

実現したいこと

次の3つのどれでもよいので教えてください。
1.なぜこのようなことが発生するのか、発生しない方法があるのか。
2.記事一覧を選んだ時にURLの最後が
/blog/
になった時、強制的に(プログラム的に)
/blog
にする方法を教えてください。
3.console.logを使って、使う場所とみるべき変数を教えてください。

よろしくお願いいたします。

発生している問題・エラーメッセージ

エラーメッセージ:「404 Not Found」

該当のソースコード

Nuxtのblogの一部

1 <table> 2 <tbody> 3 <tr v-for="(item,key) in items" :key="key"> 4 <td>{{ new Date(item.publishedAt).toLocaleDateString() }}</td> 5 <td> 6 <nuxt-link :to="'article/' + item.id" style="text-decoration: none;"> 7 {{ item.title }} 8 </nuxt-link> 9 </td> 10 <td>{{ item.nickname }}</td> 11 </tr> 12 </tbody> 13 </table>

試したこと

Nuxtのblogの一部

1// もし、パスの最後が '/blog' でなかったら '/blog' に書き換える 2 mounted() { 3 if (!this.$route.fullPath.endsWith('/blog')) { 4 this.$router.push('/blog') 5 } 6 }

この方法はうまくいきません。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

問題がいつ発生するか分からないものなので、治ったかどうかわかりませんが、次のようにしました。
変更前のフォルダー・ファイル位置

 page   +-- blog.vue(一覧表示)   +-- article      +-- _id.vue

変更後のフォルダー・ファイル位置

 page   +-- blogs      +-- index.vue(一覧表示)      +-- article         +-- _id.vue

この変更でうまくいくか、しばらく使ってみます。
ありがとうございました。

投稿2022/07/24 01:21

Koock

総合スコア32

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問