【Antd+Vue】Antd Proはどのようにエージェントを構成するか、webpack devServerはどのように使うか

Antd Proはどのようにエージェントを構成し、webpack devServerはどのように使用しますか?

一、投げ出し問題

二、理論解答

公式サイトは何と言いますか?

私のまとめ:3ステップwebpack devServer

を理解する

三、コード実践--異なる環境におけるaxios事例のbaseURL

を構成する

開発環境

生産環境

一、問題を投げ出す
Antd Pro of Vueを使用して開発を行う場合、私のフロントエンドで開発したアドレスと要求されたインタフェースアドレスのドメイン名が異なるという問題に直面するのは避けられません.これはどうすればいいですか.インタフェースの接頭辞をどのように統一的に処理しますか?
二、理論解答
公式サイトは何と言いますか?
バックエンドサーバへのエージェントのエージェント化方法については、Ant Design Proがvue-cli 3を使用し、webpack devServerを使用してエージェントをサポートしています.vue-cliとwebpackの公式ドキュメントを参照してください.
私のまとめ:3ステップwebpack devServerを理解する
正直に言って、当初はまだ小さい白の私で、公式サイトの解答を見終わってまだ少し愚かです.一連の穴を登った後、この問題を解決することに成功し、以下のまとめを行った.
まず、webpackdevServerについて、次の3つの点を理解します.

使用シーン(where):開発環境とオンライン環境リクエストのインタフェースが異なる場合があります.この場合、リクエスト転送が必要です.

なぜそれを使用するのか(why):これはドメイン間で構成されており(http-proxy-middlewareを使用して実装されている)、ドメイン間で要求

を送信できるようにしています.

はいつ有効になりますか(when):devServerの下のproxy構成項目を構成し、開発環境でのみ有効になります.(オンライン環境にはdevServerがないためproxyも有効になりません)

三、コード実践–異なる環境におけるaxios事例のbaseURLの構成
プロジェクトのsrc\utils\request.jsファイルでは、axiosインスタンスのbaseURLがVUE_APP_API_BASE_URLという変数で決まっています.

//    axios   
const service = axios.create({
     
  baseURL: process.env.VUE_APP_API_BASE_URL, // api base_url
  timeout: 6000 //       
})

開発環境

.env.developmentファイルでは、VUE_APP_API_BASE_URLが/apiであることがわかります.(このファイルを変更する必要はありません)

vue.config.jsファイルで、エージェントを開きます.

src\main.jsファイルでmockを削除します.

// .env.development
NODE_ENV=development
VUE_APP_PREVIEW=true
VUE_APP_API_BASE_URL=/api

// vue.config.js  ，  proxy    --author by Emily
devServer: {
     
    disableHostCheck: true, //   vue    “Invalid Host header”  
    port: 8000, // development server port   8000，                   
    //         ，   mockjs /src/main.jsL11
    proxy: {
     
      '/api': {
      //   API   ，  API       ，         
        target: 'http://www.baidu.com', //        ，    IP  。  API  /api/getList,        http://www.baidu.com/api/getList 。
        ws: false,
        changeOrigin: true, //   target             changeOrigin: true，       。
        pathRewrite: {
     
          '^/api': '' //     ，        API  。          /api。     API  ：/api/getList,         ：http://www.baidu.com/getList
        }
      }
    }
  },

// main.js
...
// import './mock' //               mock     

せいさんかんきょう
生産環境では、devServerを歩くことはありません.したがって、注目点は、.envファイルを修正するVUE_APP_API_BASE_URLに置くべきである.

// .env   
NODE_ENV=production
VUE_APP_PREVIEW=false
VUE_APP_API_BASE_URL=''

注意:効果を有効にするには、プロファイルを変更した後、プロジェクトを再起動する必要があります.