Vue-cli に基づいて構築されたプロジェクトがバックエンドとどのように対話するかについての紹介

この記事は主に、Vue-cli に基づいて構築されたプロジェクトがバックエンドとどのように連携するかを詳しく紹介し、説明しています。非常に優れた内容なので、参考として共有します。

この間、私は開発に Vue を使用していましたが、そのほとんどは単純なデータ バインディングを使用していました。たくさんの落とし穴を経験したので、苦労し始めた友達に役立つことを願ってまとめました。

FAQ 1: vue-cli で環境をセットアップした後、ローカル ドメイン名とテスト環境のドメイン名が一致しません。ドメイン間でバックエンド インターフェイスにアクセスするにはどうすればよいですか?

configディレクトリでindex.jsを見つけて、devの下に以下を追加します:

proxyTable: {
  '/api':{//指定以/api开头的接口都走代理
   target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名
   changeOrigin:true,//支持跨域
   pathRewrite:{
    '/api':''
   }
  }
 },

上記の構成は実際には、非常に強力なhttp-proxy-middlewareパッケージを使用したdev-serverです。より高度な使用方法については、ドキュメントを確認してください。

Request /api/getGame 送信される実際のリクエストは https://yhhdtest.moguyun.com/getGame です

ローカル環境と本番環境に適したバックグラウンドリクエストを設定します

上記に従って設定した後、ローカル環境はクロスすることができます-ドメインとバックグラウンドの相互作用が成功しました。ただし、各インターフェイスの前に不要な /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:'""'
}

この時のリクエストは次のように書くことができます

以上がこの記事の全内容です。 、PHP 中国語 Web サイトに注意してください。

関連する推奨事項:

クロスドメインルーティングの競合を解決するための vue のアイデアについて

vue.js のフロントエンドとバックエンドのデータ相互作用のデータ送信操作について

マルチの再構築-vue cli に基づいたページのスキャフォールディングプロセスの紹介

以上がVue-cli に基づいて構築されたプロジェクトがバックエンドとどのように対話するかについての紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。