申し訳ありませんが、(プロジェクト名) は JavaScript が有効になっていないと正しく動作しません/Vue ルーティング履歴モード ジャンプ エラー 404 -- 解決策

発生した問題: ローカル開発環境、プロジェクトは vue-cli で作成され、アクセス インターフェイスのステータスは 200 ですが、データが正しく返されず、返された情報に「申し訳ありませんが、サンプルが正しく動作しません」というプロンプトが表示されます。 JavaScript が有効になっていません。続行するには有効にしてください。」

グローバルに検索すると、パッケージ化された dist ディレクトリの index.html に同一の文があることがわかり、リクエストがインデックス ページを返したことを示しています。

インターネットで検索してみると、サーバーの設定が間違っていて、要求されたパスが一致しなかった可能性があります。開発段階にある場合 (npm runserve を実行する)、プロキシ devServer.proxy を確認します。テスト環境または運用環境にある場合は、nginx、または Apache およびその他のサーバーを確認します。

たとえば、HTTP リクエストのパスは /login である場合、まず nginx.conf ファイル内の場所を確認して、/login の転送が構成されているかどうかを確認します。「/」が複数ある場合や「/」が少ない場合は、規則的なパターンが一致しない可能性があります。

server{
        listen       8080;
        server_name  localhost;

        location ~^/(oauth|login|user|api) {
            proxy_http_version 1.1;
            proxy_pass http://xxxxxx:8080; 
            # 这是后端接口的地址，http见到oauth开头，login开头等都会跳转到这里
            #设置允许跨域
            add_header Access-Control-Allow-Origin *;
            add_header Access-Control-Allow-Methods "POST, GET, DELETE, OPTIONS";
            add_header Access-Control-Allow-Headers "Origin, Authorization, Accept";
            add_header Access-Control-Allow-Credentials true;
        }
        location / {
            root    /usr/dev/project/fe/test;
            # index  index.html index.htm;
            try_files $uri $uri/ /index.html; 
            #这里是history路由模式，需要加，如果是hash模式不需要。
        }
    }

vue のルートが履歴モードの場合、ホームページにはアクセスできますが、他のページにアクセスするとエラー 404 が報告されます。その場所に次のコードを追加できます。つまり、ルートのパスが次のように使用されます。開始パス。最初のindex.htmlはページの初期化として見つかります。見つからない場合は、次のレベルのディレクトリに移動して見つけてください。**

location / {
  try_files $uri $uri/ /index.html;
}

サーバーがnode.jsで書かれている場合は、中間ライブラリconnect-history-api-fallbackを使用することをお勧めします。

npm 公式 Web サイトで検索した後、サーバーにダウンロードして 404 問題を解決するために使用できます。

//引入
const history = require('connect-history-api-fallback');
//使用
app.use(history());

他のブロガーを参照する方法の概要は次のとおりです。

1. モードタイプ
フロントエンド変更方法: モードタイプをヒストリーからハッシュに変更、
バックエンド変更方法: モードまたはヒストリー、バックエンドで nginx を構成し、マッピング関係を設定します。

2. publicpath パスの問題
publicpath には絶対パス '/' が必要です

3. ローカル開発、サービスエージェント情報
エージェント情報が正しいか、複数のエージェントが記述されていないか確認してください

4. コンポーネントコードに構文上の問題があるかどうかを確認する

---