前提・実現したいこと
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のサーバ設定等、見落としがあるかと思うのですが、ご教授願います。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。