VUE-CLI3クロスドメインの設定

クロスドメインプロキシの設定

デフォルトの設定3.xのは、CLIサービスの年に転送されているので、私たちはプロジェクトの数の設定をカスタマイズする必要がある場合、プロジェクトが、設定項目を生成していないので、あなたは、ルートディレクトリ(ルート)でプロジェクトを作成する必要がありますvue.config.jsvue.config.jsすべての設定項目はライン上で彼らのニーズのいくつかを設定する必要があり、不要なデフォルトの設定の多くを見るために私たちを回避する、オプションである場合。[ 公式文書 ]


配備ディレクトリbaseUrlには関連しているので、私たちが必要とする唯一の変数は、開発環境であるので、展開時、我々は問題を避けるために、可能な限りbaseUrlに、この変数を移動しないでください。だからここに少し設定を変更しました。

需要は、我々は唯一の開発環境でプロキシクロスドメインを設定する必要があるということですので、私たちは、環境変数は、開発環境へのプロキシに設定することができます追加することができます。公式には提供環境変数コンフィギュレーション手法を。

プロジェクトのルートディレクトリでは、作成し.env.developmentた開発環境変数の設定を行うには、ファイルを。

私たちは.env.development、可変ケースファイルを設定しVUE_APP_BASE_API=/api、我々は唯一のある、VUE_APP_BASE_APIに割り当てられ書き換えdevServerにプロキシURLをaxios使用してパッケージングソリューションVUE_APP_BASE_APIあなたはdevServerに対応する変数を設定することができ、この変数を。

// vue.config.js
module.exports = {
    // 修改的配置
    // 将baseUrl: '/api',改为baseUrl: '/',
    baseUrl: '/', devServer: { proxy: { '/api': { target: 'http://www.example.org', changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } } } } } // .env.development VUE_APP_BASE_API=/api

ここではまだ使用されているHTTPプロキシ・ミドルウェアのプロキシ設定を行うには、いくつかのカスタム設定は、公式サイトを参照することにする会場もできます。

おすすめ

転載: www.cnblogs.com/jinsuo/p/11712802.html