1.背景
従来のVUEプロジェクトは、限り、私たちのように、ローカル環境と本番環境に分かれているconfigフォルダdev.env.jsとprod.env.js対応する構成にすることができます。しかし、最近のプロジェクトは、民営化の展開を含む、行われ、本番環境では、対応するアドレスが一意ではないです。各時間は、アドレスを変更し、その後、展開、面倒で非効率的なプロセスにファイルをパッケージ化する場合。だから、コードをビルドする必要はありませんどのように設定する環境設定に対処するために、有効にそれを指示することができるでしょうか？
2、代替案
調査の後、オンラインプログラムは、2つの種類が導入されました：
- 1）静的に設けられ
config.js、パラメータはに設定windowでグローバル変数。このプログラムは、実際に実現可能であるが、しかし、危険な！！！要求アドレスが悪意を持って変更された場合、非常に良いではないの結果〜 - 2）を使用する
generate-asset-webpack-pluginプラグイン、大きな塊は、静的ファイルを生成するように構成し、必要なデータを取得するための要求により、この方法は、セキュリティ上の問題を解決する、しかしことができるが、後〜少しトラブルああ
実際のブロガーによれば、従ってアイテム、二つの方法を組み合わせること、および溶液の形態であってもよいです。
3.プログラムの実施
設定手順
最初のステップ：ではstatic新しいフォルダconfig.json、コンフィギュレーションの書き込みを書きます
{
// 基本访问地址
"BASE_URL": "http://webhmy.com"
}上の
staticファイル、およびそれが直接アクセスすることができます。
ステップ二つは：でmain.js、要求定義のプロファイル、および配置Vue.prototypeするためにここにグローバルにアクセス可能な、注意を払うでnew Vue()実行中の要求を入れて、それが買収よりも小さい値に要求し、ページレンダリングの差リード間の時間を予防することです、これはより多くの保険です。
// 定义外部接口可配置
import axios from 'axios'
let startApp = function () {
axios.get('/static/config.json').then((res) => {
// 基础地址
Vue.prototype.BASE_URL = res.BASE_URL;
new Vue({
el: '#app',
router,
store,
components: {
App
},
template: '<App/>'
})
})
}
startApp()三つのステップ：あなたがいる場合.vue、ファイルを使用します。
console.log(this.BASE_URL)
// http://webhmy.comいくつかの場合.js、ファイルは、使用前のVueを呼び出すことができます。
import Vue from 'vue'
console.log(Vue.prototype.BASE_URL)
// http://webhmy.comパッケージの変更
実行は、npm run buildパッケージフォルダを見ることができますstaticフォルダの下にconfig.jsonページを更新することができ、その後、あなたが設定を変更することができ、。
[補足]
リクエストや包装作業の時間差ので、それがローカルファイルの要求ですが、時にはそれが我々のシステムの最初の要求よりも遅く要請見つけた場合でも、この時間は無効になります。
ソリューション：私は、私たちのプロジェクトは、リアルタイム値Vue.prototype.BASE_URLに対応するベースURL GETの値限り、いくつかの包装作業の要求に応じて行われていると信じて、あなたは、インターフェイスが正確に得ることができることを保証するために要求することができます〜