Vue開発環境と生産環境のインタフェースアドレスの自動判断

992 ワード

プロジェクトを開発する際に要求されるデータはドメイン間の問題に遭遇することが多いが、vueを使用してリバースエージェントを構成するのは簡単で使いやすいが、プロジェクトをパッケージアップロードする際に問題が発生し、リバースエージェントは開発環境にのみ適用され、生産環境はサポートされていない.つまり、インタフェースを処理しないとエラーが報告される.では、私たちはどのようにこの問題を解決すればいいのでしょうか.
一.configフォルダの下dev.env.js中
開発環境では、ドメイン間の問題を解決するために逆プロキシを使用しています.
module.exports = merge(prodEnv, {
      NODE_ENV: '"development"',
      API_ROOT: '"/api"'	//      ,                “/api”      
})

二.configフォルダの下prod.env.js中
生産環境下でインタフェースアドレスを交換可能
module.exports = {
  NODE_ENV: '"production"',
  API_ROOT: '"http://xx.xxx.xx.xx:8888"' //      ,      ,               
}

三.使用したファイルに必要に応じて定数を定義して上記のアドレスを保存します.
const root = process.env.API_ROOT;

データを要求するときにrootを使ってインタフェースをつなぎ合わせると、面倒なインタフェースごとに変更する必要がなくなり、面倒で意味のない作業になります.
また、専用のaxiosプロファイルを作成して処理する方法もあり、リクエストブロック、レスポンスブロック、リクエストヘッダの設定、ログイン判断など、次のルートのパッケージとともに書かれています.