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

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

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

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

Q&A

1回答

4676閲覧

Nuxt.js express-templateでURL直打ちだと404になる

massy7

総合スコア45

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Nuxt.js

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

Express

ExpressはNode.jsのWebアプリケーションフレームワークです。 マルチページを構築するための機能セットおよびハイブリッドのWebアプリケーションを提供します。

0グッド

2クリップ

投稿2018/03/04 14:55

編集2022/01/12 10:55

前提・実現したいこと

nuxt-community/express-template

Nuxt.jsとExpressでルーティングがうまくいかない

参考:nuxt-communityのexpress-templateを試してみる #nuxtjs #vuejs

発生している問題

<nuxt-link class="button" to="/">Index</nuxt-link>を利用した場合正常にルーティングされるが、URL直打ち、リロード等でアクセスすると404になる

どうやら、以下のコードで最初にdataが取得できていないのが問題?

Javascript

1async asyncData () { 2 let data 3 await axios.get('/URL') 4 .then(function (response) { 5 data = response 6 }) 7 .catch(function (error) { 8 console.log(error) 9 data = null; 10 }) 11 return { 12 data: data 13 }

localhost:3000/nothing (存在しないページ)にアクセスした際に出る404ページに設置されているnuxt-linkでは正常に<nuxt-link class="button" to="/">Index</nuxt-link>に飛ぶが、
localhost:3000にURLでアクセスした際に出る404ページに設置されているnuxt-linkでは飛べない(htmlのaタグは同じ。SPAがロードされていない?)

connect ECONNREFUSED ::1:3000が発生する

試したこと

Node.js (Express)
Node.js/Express では connect-history-api-fallback middleware の利用を検討してください。

を入れてみる (変わらず)

js

1const history = require('connect-history-api-fallback') 2 3const app = express() 4const host = process.env.HOST || '127.0.0.1' 5const port = process.env.PORT || 3000 6 7app.use(history())

Expressのサーバ設定等、見落としがあるかと思うのですが、ご教授願います。

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

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

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

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

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

guest

回答1

0

私の場合、以下で解決しました。

  • asyncDataの()内にcontextを追加
  • axios.getをcontext.$axios.$getに変更
export default { async asyncData() { const { data } = await axios.get('/api/users') return { users: data } } }
export default { async asyncData(context) { const data = await context.$axios.$get('/api/users') return { users: data } } }

投稿2020/04/22 15:13

編集2020/04/22 15:14
msickpaler

総合スコア14

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問