Vueでプロキシを実装する手順の詳細な説明

php中世界最好的语言
リリース: 2018-04-27 15:43:18
オリジナル
2761 人が閲覧しました

今回は、Vue でプロキシを実装する手順について詳しく説明します。Vue でプロキシを実装するための 注意事項 について、実際のケースを見てみましょう。

Vue Framework 開発中に、クロスドメインの問題が発生することがあります。config/index.js で proxyTable コンテンツを構成し、プロキシ プロキシを使用できます。

// config/index.js 文件
proxyTable: {
   '/api': {
    target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号
    changeOrigin: true,   // 跨域
    pathRewrite: {
     '^/api': '/'     
    }
   }
  },
ログイン後にコピー

これは、ターゲット内のアドレスを置き換えるために「/api」を使用するものとして理解されます。たとえば、「http:」を呼び出したい場合、インターフェースを削除するときに API を直接使用します。 //192.168.149.90:8080/xxx/duty?time =2017-07-07 14:57:22'、直接書くと '/api/xxx/duty?time=2017-07-07 14:57:22 ' dev.env.js 環境で開発を設定するには

リクエストアドレス

// config/dev.env.js 文件
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 ADMIN_SERVER: '"/api/"',
});
ログイン後にコピー
プラグインの axios をリクエストする場合、設定は次のようになります
const adminServer = axios.create({
 baseURL: process.env.ADMIN_SERVER,
});
ログイン後にコピー
この記事の事例を読んで、方法をマスターしたと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事にご注目ください。

推奨書籍:

vue のマルチページ開発とパッケージ化を実装する手順の詳細な説明


vue での .sync 修飾子の使用の詳細な説明

以上がVueでプロキシを実装する手順の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!