Vue-cliに基づいて構築されたプロジェクトがバックグラウンドとどのように対話するか
1517 ワード
この間はvueを振り回して開発したこともありますが、ほとんどは簡単なデータでバインドされています.たくさんの穴を踏んで、まとめて、振り回され始めたばかりの仲間に助けてほしいです.
よくある質問1:vue-cliで環境を組み立てた後、ローカルドメイン名とテスト環境のドメイン名が一致せず、どのようにドメインをまたいでバックグラウンドインタフェースにアクセスしますか?
configディレクトリの下にindexを見つけます.js、devで次のように追加します.
以上の構成は、dev-serverが非常に強力なhttp-proxy-middlewareパッケージを使用していることです.詳細については、ドキュメントを参照してください.
リクエスト/api/getGameが実際に送信したリクエストはhttps://yhhdtest.moguyun.com/...
ローカルおよび本番環境に適したバックグラウンドリクエストの構成
上記の構成に従って、ローカル環境はドメイン間およびバックグラウンド間のインタラクションに成功します.しかし、各インタフェースの前には、もともと必要でない/api接頭辞が追加されています.これは、私たちの生産とは一致しません.この場合、コンパイルによって区別する構成が必要です.
indexでjsの下でそれぞれdevとprodを見つけます(ある項目は直接抽出して、単独でファイルになった可能性があります)
ポイントはAPI_HOST、この時私たちのリクエストはこのように書くことができます.
よくある質問1:vue-cliで環境を組み立てた後、ローカルドメイン名とテスト環境のドメイン名が一致せず、どのようにドメインをまたいでバックグラウンドインタフェースにアクセスしますか?
configディレクトリの下にindexを見つけます.js、devで次のように追加します.
proxyTable: {
'/api':{// /api
target:'https://yhhdtest.moguyun.com',//
changeOrigin:true,//
pathRewrite:{
'/api':''
}
}
},
以上の構成は、dev-serverが非常に強力なhttp-proxy-middlewareパッケージを使用していることです.詳細については、ドキュメントを参照してください.
リクエスト/api/getGameが実際に送信したリクエストはhttps://yhhdtest.moguyun.com/...
ローカルおよび本番環境に適したバックグラウンドリクエストの構成
上記の構成に従って、ローカル環境はドメイン間およびバックグラウンド間のインタラクションに成功します.しかし、各インタフェースの前には、もともと必要でない/api接頭辞が追加されています.これは、私たちの生産とは一致しません.この場合、コンパイルによって区別する構成が必要です.
indexでjsの下でそれぞれdevとprodを見つけます(ある項目は直接抽出して、単独でファイルになった可能性があります)
dev.env.js
module.exports = merge(prodEnv, {
NODE_ENV: '"development"',
API_HOST:'"/api/"'
})
prod.env.js
module.exports = {
NODE_ENV: '"production"',
API_HOST:'""'
}
ポイントはAPI_HOST、この時私たちのリクエストはこのように書くことができます.
process.env.API_HOST+'/getGame'