まず、需要の背景

　　ネットワーク要求のプロジェクト開発の異なる段階でBASEURLは、私がマッサージチェアのプロジェクトを作成するとき、たとえば、DEV環境、テスト環境、そして最終的に本番環境があり、一般的に異なっています。携帯端末事業は、マイクロ文字やAlipayの支払を含むので、それは、テスト環境を持っている何の問題をテストしていないし、その後正式な環境にデプロイする必要があり、これら2つの異なるbaseUrlには、それがどのように切り替えますか？これは、以下の話です。　　　　　　

第二に、一般的な実装

　　以下のように従来の方法では、異なるif文の中に、一定の値に応じて、定数を設定することです：　

// 通常の練習 
MODE =ましょう" DEV " ; // ユーザーが設定することができます：PROD、DEV、テストを 
しましょうbaseUrlに= "" ;

もし（モード== " DEV " ）{
  baseUrlに == " http://api.xmdev.com " 。
} そう であれば（モード== " 試験" ）{
  baseUrlに == " http://api.xmtest.com " 。
} 他{
  baseUrlに == " http://api.xmprod.com " 。
}

書き出す {
  baseUrlに
}

　　このアプローチは、基本的なニーズを実現することですが、ある日上司が突然言ったならば、我々は継続的な統合をやって起動する場合は、このプロジェクトでは、コードは、地元のバグに成功した後に実行するスクリプトを実行することによって、サーバーに直接ソースコードコンパイラパッケージをアップロードした後、nginxのを指していません。 index.htmlファイルには、[OK]を展開してコンパイル。この従来のアプローチ上のこの時間は、明らかに動作しません。

　　ここで私は、上記の要件を達成するために、サードパーティのライブラリを導入：クロスENVを

第三に、サードパーティのライブラリを使用すると、クロスENVを達成するために

　クロスのenv公式の記述がある：スクリプトを設定するためのクロスプラットフォーム環境では、設定を気にせずに、単純なコマンド（設定環境変数）を渡すか、またはプラットフォーム環境変数を使用することができます。

　　開発、テスト、正式：ADOは、これは上記の要求に応じて実施されるべきであるかを見てみましょう、我々は今、3つの環境を持っています。環境に応じて異なるアドレスを設定します。次の手順は、使用に固有のものです

（A）、信頼マウント

NPMインストール--save-devのクロスENV

（B）、test.env.jsファイルを追加

「厳格な使用」。
module.exportsは = {
  NODE_ENV：' "テスト" ' 、
  ENV_CONFIG：' "テスト" ' 
};

（III）のファイルprod.env.jsを変更

「厳格な使用」。
module.exportsは = {
  NODE_ENV：' "生産" ' 、
  ENV_CONFIG：' "PROD" ' 
};

（IV）webpack.prod.conf.jsは、ビルドディレクトリをファイルを変更

// CONST ENV =必要とする（ '../設定/ prod.env '）
CONST ENV = config.build [process.env.env_config + ' のEnv ' ]。

（E）、設定ファイルのディレクトリを変更index.js

構築：{
     // コードの次の2行を追加 
    prodEnv：必要（「./prod.envを」）、
    testEnv：（必要' ./test.envを' 、）
     // index.htmlをするためのテンプレート
    のインデックス：
      path.resolve（__ dirnameは、' ../dist/index.html ' ）、
     // パス 
    assetsRoot：path.resolve（__ dirnameは、' ../dist ' ）、
    assetsSubDirectory：' 静的' 、
    assetsPublicPath：' / ' 、
    ...................  
}

（六）、build.jsはビルドディレクトリをファイルを変更

// constのスピナー= ORA（ '生産のための建物...'）
するvarスピナー= ORA（' のための建物' + process.env.NODE_ENV + ' の' + process.env.env_config + ' モード... '）;

（七）、ファイルpackage.jsonを変更

 " スクリプト" ：{
     " DEV "：" のWebPACK-devのサーバー--inline --progress --config / webpack.dev.conf.jsを構築する" 、
     " スタート"：" NPMの実行DEV " 、
     " ビルド"：" ノードビルド/ build.js " " ビルド-テスト"：" クロスENV NODE_ENV =テストenv_config =テストノードビルド/ build.js "// NPMの実行ビルド-テスト测试の环境打包
     " ビルド- PROD "："生産ENV-NODE_ENV =クロスenv_config =のProdノードビルド/ build.js 「RUN NPM //ビルド- //製品版の生産、包装
  }、

（八）は、共通/ jsのディレクトリ内のファイルを変更するconfig.jsの

もし（process.env.NODE_ENV == ' 開発' ）{
  baseUrlに = " http://api.xmdev.com " 。
} そう であれば（process.env.NODE_ENV == ' 生産' ）{
  baseUrlに = " http://api.xmprod.com " 。
} そう であれば（process.env.NODE_ENV == ' テスト' ）{
  baseUrlに = " http://api.xmtest.com " 。
}

（IX）、テスト

　　開発環境は、ローカル実行dev内に直接効果を確認することは容易です。

　　テスト環境と正式な環境は、ローカルサービスTomcatを必要とするローカルにここで説明されていないTomcatサービスを開始する方法を、開始します。

　　実装は、「ビルドを実行NPM - テスト」をライン上のWebアプリケーション/ ROOTディレクトリのtomcatにコンパイルされたファイルの後に。

　　そして、「NPMの実行ビルド - PROD」を実行し、以下のWebアプリケーション/ ROOTに、後にコンパイルされたファイルを、次のAPIを見ることができます。プロセスはbaseUrlには、多くの場合、ネットワークライブラリにカプセル化され、正式に開発されました。

　　このプロジェクトは、貧しい学生はシュシュをダウンロードすることができ、githubのにアップロードされています：CrossEnvDemo

第四に、それを避けます

　　ます。http：//www.xmtech.com時々、環境は公式のアドレスです。ます。http：//www.xmtech.com/test/index.html直接学生がリダイレクトを行うためにnginxのを使用するようにして、テスト環境のアドレスが存在しますバックエンドを簡単にするために、テスト環境を取得した場合。今回のWebPACKの設定ファイルで、状況に応じて変更を行う必要がある、またはリソースがコンパイルされたファイルを見つけることができないため、ページの展開後、空白になります

　　webpack.base.conf.jsファイルでは、特定の状況に応じて変更を加えたいです。

assetPublicPathをしましょう。
もし（process.env.env_config == ' テスト' ）{
  assetPublicPath='/test/'
}else if(process.env.env_config == 'prod'){
  assetPublicPath=config.build.assetsPublicPath;
}else{
  assetPublicPath=config.dev.assetsPublicPath;
}

プロジェクトクロスのenv環境サブパッケージで使用されるVUE足場