Vue.jsのhtmlファイルを提供するエクスプレスサーバー

Question

CLIを使用してVueアプリケーションを作成しました。私はビルドコマンドを実行し、htmlファイルと関連付けられているjs/cssファイルなどでdistフォルダを取得しました。今、私は半分の作業しか書いていない、ノード/エクスプレスサーバでherokuでアプリケーションをホストしたいと思います。

私は、さまざまなルートで異なるコンポーネントをレンダリングするためにvueルーターを使用しています。私は要求してい急行サーバはすべての経路全体でhtmlファイルをサーバーにだけあるよう

const routes = [ 
    {path: "/", redirect: "/home"}, 
    {path: "/home", component: body}, 
    {path: "/home/new", component: create}, 
    {path: "/home/entry/:id", component: blog}, 
    {path: "/register", component: register}, 
    {path: "/logout", component: logout}, 
    {path: "/home/user/:userprofile", component: userprofile} 

] 

マイVUEのアプリケーションは、そのすべてのデータに別々のバックエンドのAPIを呼び出します。

これは私がグーグルから見つけたものです：

var express = require('express'); 
var path = require('path'); 
var serveStatic = require('serve-static'); 
var port = process.env.PORT || 5000; 

app = express(); 

app.use(serveStatic(__dirname + "/dist")); 

app.listen(port); 

私は「/」ルートするつもりですが、私は「/ホーム」または同様に行くとき、それはエラーが「GETすることはできません戻ったときにそれが機能します/ home "または同様のものです。

誰かがHerokuでvueを配備するための簡潔でシンプルな明示的なアプリケーションを書いてもらえますか？

Answer 1

ほとんどの場合、すべてのリクエストを「/」にリダイレクトするためにWebサーバー上の設定が欠落している可能性があります。それ以降はVueJsルーターが責任を負いますが、明示的にWebサーバーを構成しない限り、要求を受け取ることはありません。

Hereは、Webサーバー設定に追加する必要のあるさまざまなWebサーバー用の短いコードスニペットを含むVue Routerのドキュメントページです。