vue-router 履歴モードサーバー側設定プロセス記録

歴史ルート

履歴モードとは、HTML5 の履歴 API を使用してクライアント側ルーティングを実装するモードを指します。その典型的な動作は、ハッシュモードで URL パスの # を削除することです。 Vue-Router を使用すると、履歴モードを有効にするのは非常に簡単です。ルートをインスタンス化するときに、mode:'history' 構成項目を渡すだけです。ただし、サーバーのサポートがない場合、historyAPI に基づくルートは、URL アドレスバーから指定されたページに直接アクセスできません。これは、URL アドレスバーに入力して Enter キーを押すと GET リクエストを送信するのと同じになり、# のないルートパスは通常の API インターフェイスと同じになるため、理解しやすいです。サーバーはこのようなインターフェイスを定義していないため、直接アクセスすると 404 ページが表示されるのは正常です。

公式の例

公式ウェブサイトでは、このシナリオを処理するためのさまざまな方法が提供されています。例として、node.js バージョンを見てみましょう。

定数 http = require('http')
定数 fs = require('fs')
定数 httpPort = 80

http.createServer((req, res) => {
  fs.readFile('index.htm', 'utf-8', (err, content) => {
    もし（エラー）{
      console.log('"index.htm" ファイルを開くことができません。')
    }

    res.writeHead(200, {
      'コンテンツタイプ': 'text/html; 文字セット=utf-8'
    })

    res.end(コンテンツ)
  })
}).listen(httpPort, () => {
  console.log('サーバーはhttp://localhost:%sでリッスンしています', httpPort)
})

その処理の考え方は、すべてのリクエストを強制的にホームページにリダイレクトすることであり、これはアクセスリソースが存在しない状況をサーバーがブロックし、ルーティング作業をクライアントに任せることと同等であることは容易に理解できます。このように、履歴モードが有効になっているフロントエンドルーティングでは、サブページを直接検索してもエラーは報告されません。

vue-router 履歴モード設定

vue-router の履歴モードでは、ルーティング設定のモードを history に設定する必要があり、サーバー側でも対応する設定が必要です。

ハッシュモードと比較すると、履歴モードでは、ページの URL に含まれる # などの記号が少なくなります。

ハッシュ: www.example.com/#/login

履歴: www.example.com/login

シングルページアプリケーションの履歴モードでは、ブラウザーはサーバーにこのページを要求しますが、サーバーにはこのページがないため、404 を返します。したがって、この時点でサーバーを構成する必要があります。静的リソースに加えて、シングルページアプリケーションの index.html を返す必要があります。

サーバー構成 - nodejs

Node.js サーバーでは、履歴モードを処理するために connect-history-api-fallback モジュールを導入し、静的リソースを処理するためにミドルウェアを使用する前にこのモジュールを使用する必要があります。

定数パス = require('path')
// 履歴モードを処理するモジュールをインポートします。const history = require('connect-history-api-fallback')
定数 express = require('express')

const app = express()

// 履歴モードを処理するためのミドルウェアを登録します app.use(history())
// 静的リソースを処理するためのミドルウェア app.use(express.static(path.join(__dirname, './web')))

app.listen(3000, () => {
    console.log('ポート3000でサービスが開始されました')
})

サーバー構成 - nginx

まず、パッケージ化されたファイルを html フォルダーに配置し、次に conf フォルダー内の nginx.conf ファイルを開いて、次の構成を変更します。

http {
    # ...その他の設定
    サーバー{
        # ...その他の設定
        位置 / {
            ルートhtml;
            インデックス index.html index.htm;
            try_files $uri $uri/ /index.html;
        }
    }
}

要約する

これで、vue-router 履歴モードのサーバー側設定に関するこの記事は終了です。vue-router 履歴モード設定に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: