vue-cli を使用してインターフェイス プロキシを設定する方法

この記事では、主に vue-cli インターフェイスのプロキシ構成を紹介します。編集者がそれを参考として共有します。エディターをフォローして見てみましょう

この記事では、vue-cli インターフェイス プロキシ設定を紹介し、それを全員と共有します。詳細は次のとおりです。

インターフェイス プロキシを設定するとき、一部の学生はインターフェイスがなぜプロキシなのかについて疑問を持つでしょう。実際、プロキシは成功しましたが、インターフェイスのアクセス アドレス ルールが明確ではありません

以下では、ローカル テストを簡単に紹介します

一部の基本的な操作はここでは紹介しません。

vue-cli config フォルダーの下にあるindex.js を見つけます。 これが設定です。 インターフェイス ルール ファイルと同じディレクトリに proxyConfig.js を作成します。一部の学生は、元のファイルで直接変更することもできます。新しいファイルを使用することをお勧めします:

module.exports = {
  proxyList: {
    '/api': {
      target: 'http://localhost:3000',  （这里是代理接口的位置）
      changeOrigin: true,（允许跨域，如果这不写，调用接口接口时会有跨域错误说缺少请求头）
      pathRewrite: {'^/api': '' } （路由规则下面详细介绍）
    }
  }
}

******ルーティング ルール**********

上記 コードが実行された後、「/api」が表示される限り、それは意味します。インターフェイス内では、設定したアドレスが自動的に設定されます。これにより、この属性 pathRewrite を使用して、必要なルートを参照できます。空の場合、インターフェースが解析中に $http.get('/api/good') を書き込むと、サーバー側では、/good にアクセスしたときに、一致する対応するルートがないことがわかります。このとき、クライアントはサーバーにエラーを表示します。そのため、多くの学生は、{' ^/api': ' を設定しても機能しないと錯覚します。これにより、/api は自動的にプロキシ アドレスに解決されるだけでなく、サーバー側のルートとしても表示されます。

さらに、ルーティング ルールを設定するときは、区切り文字 / に注意してください。「http://localhost:3000/」のようにターゲットを記述することを好む学生もいます。ポートの後に区切り文字を追加すると、次のようになります。この場合、名前を付けるときに「/」を追加する必要があり、インターフェースが正しいことを確認するためにルーティング ルールにも「/」を追加する必要があります。インターフェースをリクエストするときに追加の区切り文字が存在すること (「/api//goods」など)。

設定後、index.jsにproxyConfig.jsを導入し、proxyTableを設定すれば設定完了です

const proxyConfig = require('./proxyConfig')
module.exports = {
  dev: {
    env: require('./dev.env'),
    host: 'localhost',
    port: 8188,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxyList,
    cssSourceMap: false,
  }
 }

リクエストする場合はこう書きます

axios.get('/api/goods').then((res)=>{console.log(res.data);}}).catch((err)=>{console.log(err);}})

以上、皆さんに向けてまとめたものです、皆さんのお役に立てれば幸いです将来。

関連記事:

Vue2.0の親コンポーネントと子コンポーネント間のディスパッチ機構の実装について(詳細なチュートリアル)

react-routerで履歴を使用してルーティングを制御する方法(詳細なチュートリアル)

方法jqprint を使用してページを印刷するには コンテンツ

js を使用して WeChat を実装し、Alipay を呼び出して赤い封筒を受け取るようにします (詳細なチュートリアル)

Gulp を使用して静的 Web ページのモジュール化を実装する方法 具体的にはどうすればよいですか?

vux を vue.js に統合してプルアップ読み込みとプルダウン更新を実現する方法

以上がvue-cli を使用してインターフェイス プロキシを設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。