2017-05-28 9 views
1

私はVue.jsとvue-cli webpackを使って簡単なアプリケーションを構築しました。vue-routerとExpress

私はvue-routerを使用して、さまざまなビューでサイトのナビゲーションを制御しました。これはローカルで実行しているときにうまく動作します

私は現在、これをHerokuに配備したいと考えていますが、URLはもはや機能しません。私はミドルウェアを実装しようとしましたが、レンガの壁に当たっています!

私はアプリケーションを正しく実行するためにnode.js/expressを設定する正しい行に私を導くかもしれない何かを探しています。今使って作業似たような状況では、これらについては、

多くのおかげで、

ジェームズ

+0

についての詳細を学ぶことができますが、 'モードを追加しました:歴史'を実行し、サーバーを設定しましたか? Node.js(Express) –

+0

を設定するにはこちら(https://router.vuejs.org/en/essentials/history-mode.html)を参照してください。したがって、localhost:4444で "npm run dev"をローカルで実行すると、完全に動作します。ヘロクで走っているときはホームページを手に入れていますが、他のページを読み込んだときには「取得できません/ログインできません」というメッセージが表示されます。 –

+0

あなたのサーバーを設定した後でも? –

答えて

4

const express = require('express'); 
const history = require('connect-history-api-fallback'); 
const app = express(); 

const staticFileMiddleware = express.static(__dirname); 
app.use(staticFileMiddleware); 
app.use(history({ 
    disableDotRule: true, 
    verbose: true 
})); 
app.use(staticFileMiddleware); 

const port = 5555; 
app.listen(port,() => { 
    console.log(`Example app listening on port ${5555}!`); 
}); 

あなたはconnect-history-api-fallback

+0

あなたはリンクを参照して答えを返しました。これは、同じ種類の疑いのある未来のユーザーのために役立ちます –

+0

静的ミドルウェアは実際には2回必要です:1回は静的ファイルが404から消えるのを防ぐため、もう一度 'history'をリダイレクトしてから' index.html'を解決してください。また、これは他のExpressルートを定義した後にすべて実行する必要があることに注意してください。 – spiffytech

関連する問題