IE ルーティングでリダイレクトするときに Vue プロジェクトがエラーを報告した場合はどうすればよいですか?

Vue.js フレームワークを使用し、Vue Router を使用してルートを管理するプロジェクトを開発している場合、問題が発生する可能性があります。IE ブラウザでは、ルート ジャンプでエラーが報告されます。

この問題は通常、Vue Router が HTML5 の History モードを使用しているが、IE ブラウザがこのモードをサポートしていないことが原因で発生します。ただし、心配しないでください。この問題を解決する方法を以下で説明します。

解決策

1. ポリフィルの導入

HTML5 履歴モードではブラウザが HTML5 API をサポートする必要があり、IE ブラウザは以前のバージョンの HTML API のみをサポートしているため、互換性を持たせるためにポリフィルを使用する必要があります。

次のコードを使用してポリフィルを導入できます:

<!-- 引入 polyfill -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>

2. ルーティング モードを構成します

IE ブラウザがサポートしていない問題を解決するには履歴モード。Vue Router のルーティング モードを変更する必要があります。デフォルトの履歴モードからハッシュ モードに変更します。

Vue Router の設定ファイルで、次のコードを見つけます:

const router = new VueRouter({
  mode: 'history',
  routes
})

mode の値を history から hash に変更します。 以上:

const router = new VueRouter({
  mode: 'hash',
  routes
})

3. サーバーの構成

デプロイメント中にプロジェクトがサーバーと対話する必要がある場合は、ルーティング ジャンプをサポートするようにサーバーを構成する必要があります。 Vue Router の履歴モードを使用する場合、ユーザーがブラウザのアドレス バーにアドレスを入力すると、サーバーはデフォルトでユーザーがそのアドレスの下のファイルまたはディレクトリにアクセスする必要があると想定し、リクエストをサーバーに送信します。処理用のファイル システム。しかし、実際には、現在のページが正しくレンダリングされるように、リクエストを Vue Router に送信して処理することをお勧めします。

Node.js をサーバーとして使用している場合は、次のコードを通じて構成できます:

const express = require('express')
const app = express()

app.use(express.static(__dirname + '/dist'))

// 对所有请求都返回 index.html 文件
app.get('*', function(req, res) {
  res.sendFile(__dirname + '/dist/index.html')
})

const port = process.env.PORT || 8080
app.listen(port, () => {
  console.log(`Server started at ${port}`)
})

上記のコードは Express フレームワークを使用し、静的ファイルを保存する静的フォルダーを設定します。 Web サイトリソースのファイル。すべてのリクエストに対して、Vue Router が適切に機能し、リダイレクト リクエストを処理していることを確認するために、index.html ファイルが返されます。

まとめ

以上はIEブラウザ下でのVueプロジェクトのルーティングジャンプエラーを解決する方法です。この問題が発生した場合は、互換性のためにポリフィルを使用したり、ルーティング モードを変更したり、サーバーを構成したりすることができます。変更が正しく行われていることを前提として、プロジェクトは IE ブラウザーで正常に実行できます。

以上がIE ルーティングでリダイレクトするときに Vue プロジェクトがエラーを報告した場合はどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。