外向的な構成のVUE生成-資産のWebPACK - プラグイン

ソリューション:( 2つの方法があります)

図1に示すように、プラグイン生成・資産のWebPACK-プラグインです。webpack.prod.conf.jsでconfigServer.jsonファイルを生成して行く、それはビルド時にJSONファイルを生成し、その後、非同期フェッチJSON axios使用には、URLを置き換えることができます。

ステップ1:インストールベイ

NPMインストール--save-DEV-資産​​のWebPACK-プラグインを生成します
 

ステップ2:webpack.prod.config.jsファイルを設定

・設定可能な出力ファイルをパッケージ化するとき可。


; GenerateAssetPlugin = VAR( 'を生成-資産のWebPACK・プラグイン')を必要と
するvar createServerConfig =関数(コンパイル){
"http://www.adoctors.cn"};せcfgJson = {ApiUrlを
(cfgJson)JSON.stringifyを返します;
}
包装することを許可するとき、入力プロファイル

GenerateAssetPlugin新しい新しい({
ファイル名: 'serverconfig.json'
のFn(コンパイル、CB)=> {
CB(ヌル、createServerConfig(編集));
}、
extraFiles:[]
})
我々は、入力した後に包装ビルドを実行NPMルートディレクトリはserverconfig.jsonファイルを生成します。

 

 

ステップ3:ドメイン名などを変更する必要がある場合serverConfig.jsonを変更することができます

 

 

 

ステップ4:ApiUrlを取得

// main.jsでグローバル関数を定義
Vue.prototype.getConfigJson =機能(){
この。$ Http.get( "serverconfig.json")。その後、((結果)=> {
//グローバルフィールドに保存ApiUrlも記憶のsessionStorageを使用することが
Vue.prototype.ApiUrl = result.body.ApiUrl;
})キャッチ((エラー)=> {にconsole.log(エラー)});.
}
 

ステップ5:使用ApiUrl

; //)(app.vue内部にthis.getConfigJsonを実行
マウント:関数(){
this.getConfigJsonを();
}
VARのURL this.ApiUrl + =「/百度/ ....
ここでApiUrlまだ全体私たちは、直接することができますthis.ApiUrl

 

 

図2に示すように、第二の方法

この方法では、我々はWebPACKのコンフィギュレーションファイルがコンパイルさせ、離れて引っ張って直接設定ファイルを変更する必要があり、実際のVUE-CLIです。

 

ステップ1:静的なフォルダがあるconfig.jsと呼ばれる新しいファイルを作成します

 

 

次のステップは、コンフィグ友人の内容を設定することです

ここでプロパティ内の設定ウィンドウオブジェクトのすべてに注入され、私たちは、このプロパティをカスタマイズすることができます

 

 

 

ステップ2:このconfig.jsの内部のindex.htmlの導入

 

 

 

ステップ3:設定されたら、我々は直接呼び出すことができます

 

 

 

 

我々は、設定ファイルを見ることができます詰めた後、それがパッケージ化されていないとして出力されます。私は展開が直接ファイルを介して設定内容を変更することができたときにスタッフを展開する私たちのプロジェクトを置くときにそう。

おすすめ

転載: www.cnblogs.com/matd/p/11412428.html