ホームページ > 記事 > ウェブフロントエンド > 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 サイトの他の関連記事を参照してください。