VUEプロジェクトの開発時には、構成が（ノードがサービスを構築する）別のサーバー上のバックグラウンドの界面での2つの問題を解決するのWebPACK

今朝ので、バックエンドのスタッフはインターフェースが統合されているサーバーを持って、一生懸命注目記事の疑いがありません、

、夜に戻ってきて、単純なサーバーとノードを取り、次のテストは、問題はありません。コードは以下の通りであります：

まず、自分がプロジェクトの初期化、

1、package.json

{ 
  "名"： "ES"、
  "バージョン"： "1.0.0"、
  "説明"： ""、
  "プライベート"：真、
  "スクリプト"：{ 
    "スタート"：「のWebPACK-devのサーバー--open --config webpack.dev.js " 
    "ビルド"： "のWebPACK --config webpack.prod.js" 
  }、
  "キーワード"：[]、
  "著者"： ""、
  "ライセンス"： "ISC"、
  " devDependencies "：{ 
    "クリーンWebPACKの-プラグイン"： "^ 3.0.0"、
    "CSS-ローダ"： "^ 3.2.0"、
    "CSV-ローダ"： "^ 3.0.2"、
    "発現"：" ^ 4.17.1" 、
    "ファイル・ローダー"： "^ 5.0.2"、
    "HTML-のWebPACK-プラグイン"： "^ 3.2.0"、
    "スタイル・ローダー"： "^ 1.0.1"、
    "WebPACKの"：「^ 4.41.2 」、
    "WebPACKの-CLI"： "^ 3.3.10"、
    "WebPACKの-DEV-ミドルウェア"： "^ 3.7.2"、
    "WebPACKの-DEV-サーバ"： "^ 3.9.0"、
    "WebPACKのマージ"： "^ 4.2.2"、
    "XML-ローダ"： "^ 1.2.1" 
  }、
  "依存性"：{ 
    "lodash" ： "^ 4.17.15" 
  } 
}

コードの表示

2、webpack.common.js

CONSTパスは=（「パス」）を必要とします。
// constのCleanWebpackPlugin =（ 'クリーンWebPACKの-プラグイン'）が必要です。
CONST HtmlWebpackPlugin =（ 'HTML-WebPACKの-プラグイン'）を必要とします。
module.exportsは= { 
  エントリ：{ 
    アプリ：」./src/index.js' 
  }、
  出力：{ 
    ファイル名： '[名]の.js'、
    パス：path.resolve（__ DIRNAME、 'DIST'）
  }、
  devServer。 { 
    プロキシ：{ 
      '/ YYY'：{ 
        ターゲット： "HTTP：// localhostを：3000"、
        changeOrigin：真、
        pathRewrite：{ 
          '^ / YYY'： '/' 
        } 
      }、
      '/ WPP'：{  
        ターゲット： " http：
        changeOrigin：真、
          '^ / WPP'： '/' 
        } 
      } 
    } 
  }、
  プラグイン：[ 
    //新しいCleanWebpackPlugin（[ 'DIST']）、
    新しいHtmlWebpackPlugin（{ 
      タイトル： '生産' 
    }）
  ] 
}。

コードの表示

3、webpack.dev.js

CONSTマージ=必要とする（「WebPACKのマージ」）。
CONST共通=必要とする（」./ webpack.common.js'）。
module.exportsは=マージ（共通、{ 
  devtool： 'インラインソースマップ'、
  devServer：{ 
    contentBase： './dist' 
  } 
}）。

コードの表示

4、index.htmlを

<！DOCTYPE HTML > 
< HTML > 
  < ヘッド> 
    < タイトル>起步</ タイトル> 
    < スクリプトSRC = "https://unpkg.com/[email protected]" > </ スクリプト> 
  </ ヘッド> 
  < 身体> 
    < スクリプトSRC = "./ SRC / index.js" > </ スクリプト> 
  </ ボディ> 
</ HTML >

コードの表示

5、SRC / index.js

関数axios（API）{ 
    XHRが=新規のXMLHttpRequest（LET）。
    xhr.open（ "GET"、API、真の）; 
    xhr.onload =（）=> { 
        にconsole.log（xhr.response）
    } 
    xhr.send（）
} 

axios（ '/ WPP / API /ユーザー'）; 
axios（ '/ YYY / API /名'）;

コードの表示

 

第二に、開始ノードサービスは、インタフェースを起動します

server.js

発現=必要とする（ '発現'）とする
アプリ=表現（）させ

app.get（ '/ API /名'、（REQ、RES）=> { 
  res.json（
    {名"YYYユーザ"} 
  ）
}）

アプリ.listen（3000）

コードの表示

 

server1.js

発現=必要とする（ '発現'）とする
アプリ=表現（）させ

app.get（ '/ API /ユーザー'、（REQ、RES）=> { 
  res.json（
    {名： "WPPユーザ"} 
  ）
}）

アプリ.listen（4000）

コードの表示

 

第三に、サービスを開始

1、ノードserver.js   

図2に示すように、ノードserver1.jsまたはWebPACKの中に配置されていてもよいです

3、NPMの実行開始（プロジェクトを開始）

 

その後、コンソールを参照してください 

{ "名前"： "WPPユーザー"}
、{ "名前"： "YYYユーザ"}

 

 

サーバ1台のサーバにするとき、異なるインターフェイスと異なる場合

server1.js組み込まserver.js

発現=必要とする（ '発現'）とする
アプリ=表現（）させ

app.get（ '/ API /名'、（REQ、RES）=> { 
  res.json（
    {名"YYYユーザ"} 
  ）
}）
アプリ.get（ '/ API /ユーザー'、（REQ、RES）=> { 
  res.json（
    {名： "WPPユーザ"} 
  ）
}）

app.listen（3000）

コードの表示

 

この構成は、webpack.common.jsを変更することができます

devServer：{ 
    プロキシ：[{ 
      コンテキスト：[ '/ YYY'、 '/ WPP']、
      ターゲット： "HTTP：// localhostを：3000"、
      pathRewrite：{ 
        '^ / YYY'： '/'、
        「^ / WPP '： '/' 
      } 
    }] 
    //プロキシ：{ 
    // '/ YYY'：{ 
    //ターゲット： "HTTP：// localhostを：3000"、
    // changeOrigin：真、
    // pathRewrite：{ 
    //' ^ / YYY '： '/' 
    //} 
    //} 
    // '/ WPP'：{ 
    //ターゲット： "HTTP：// localhostを：4000"、
    // changeOrigin：真、
    // pathRewrite。{ 
    // '^ / WPP'： '/' 
    //} 
    //} 
    //}
  }、

コードの表示

 

1、ノードserver.js   

2、NPMの実行開始（プロジェクトを開始）

その後、コンソールを参照してください 

{ "名前"： "WPPユーザー"}
、{ "名前"： "YYYユーザ"}