VUEの研究ノート11

devServer.proxyにWebPACKの使用

リクエスト：

プロキシ：{
   "/ API" ：{ 
    ターゲット： "https://other-server.example.com" 、
    セキュア：偽
   pathRewrite：{
      '^ / APIを'： '' 
    } 
  } 
}

ターゲット：ターゲットインタフェースのドメイン名、すべてのパスのバック持っていない

 changeOrigin：オープンプロキシにするかどうか

pathRewrite：書き換えパス

セキュア：デフォルトでは、HTTPS上で実行するように受け入れ、およびバックエンドサーバー証明書が無効で使用しないでください。あなたが使用したい場合は、このプロパティを追加する必要があります。それは偽です。


その他の使用法：
あなたがいない場合は、プロキシ要求。戻り値は、プロキシバイパスの機能に基づくことができます。機能では、リクエストボディ、応答ボディ、およびプロキシオプションにアクセスすることができます。これは、返却しなければならない  false プロキシ要求バイパスまたはパス

例の公式ウェブサイト：

プロキシ：{
   "/ API" ：{ 
    ターゲット： "のhttp：// localhostを：3000" 、
    バイパス：機能（REQ、RES、proxyOptions）{
       場合）req.headers.accept.indexOf（ "HTML"（== - ！ 1 ）{ 
        にconsole.log（ "ブラウザの要求のプロキシをスキップします。" ）。
        戻る「/index.htmlがします」。
      } 
    } 
  } 
}

ここでは、私たちの仮想データを返すように関数を記述することができます

私たちは、ファイルdashboard_chart.jsを作成します

関数チャート（方法）{ 
  RESせ = ヌル。
  スイッチ（方法）{
     場合 "GET" ：
      RES = [10、20、30、40、50、60 ]。
      休憩;
    デフォルト：
      RES = nullを。
  } 
  戻りRES。
} 

module.exportsは =チャート。

そして、内部のカスタム構成設定vue.config.jsを行きます

前にもCSSのターン以下の設定を書きました

module.exportsは= {
   // 选项... 
  CSS：{ 
    loaderOptions：{ 
      以下：{ 
        // 这里的选项会传递给CSS-ローダ 
        javascriptEnabled：真
      } 
    } 
  }、
  devServer：{ 
    プロキシ：{
       "/ API" ：{ 
        ターゲット： "のhttp：// localhostを：3000" 、
        バイパス：機能（REQ、RES）{
           場合（！req.headers.accept.indexOf（ "HTML"）== -1 ）{ 
            はconsole.log（のための「スキッププロキシブラウザ要求「。）;
            戻る「/index.htmlがします」。他{ 
            CONST名 = req.path 
              .split（ "/ API /"）[1 ] 
              .split（ "/" ）
              .join（ "_" ）。
            CONSTモック =（ `./src/mock / $ {名前}`）が必要。
            CONST結果= モック（req.method）。
            削除 require.cache [require.resolve（ `./src/mock / $ {名前}`）]。
            リターンres.send（結果）; 
          } 
        } 
      } 
    } 
  } 
}。

そうでなければ処理データが行くことに決定し、ページ書き込み要求されます。

   getChartData（）{ 
      axios.get（「/ API /ダッシュボード/図表」、paramsは{{ID：12345}}）。次に、（RES => {
         この .chartOption = { 
          タイトル：{ 
            テキスト： "例示的な開始EChartsの取得" 
          } 、
          ヒント：{}、
          XAXIS：{ 
            データ：[ "シャツ"、 "セーター"、 "シフォンシャツ"、 "パンツ"、 "靴"、 "ソックス" ] 
          }、
          YAXIS：{}、
          シリーズ：[ 
            { 
              名：「営業」、
              タイプの：「バー」、
              データ：RES。データ
            } 
          ]
        }。
      }）; 
    }

返されたデータの割り当て。

devServer.proxyにWebPACKの使用

おすすめ