vuejsの設定：グローバル変数を使用していますか？

Question

これはダムようだが、私はそれがこのように設定している：config/index.jsで

：

module.exports = { 
    API_LOCATION: 'http://localhost:8080/api/' 
} 

が、その後src/app.jsに私が持っている：src/components/home.vueで次に

import Vue from 'vue' 
import VueRouter from 'vue-router' 
import VueResource from 'vue-resource'; 

Vue.use(VueRouter); 
Vue.use(VueResource); 

const App = require("./app.vue"); 
const home = require("./components/home.vue"); 
const config = require('../config'); 
window.config = config; 

を、私は、スクリプトブロックを持っていますそのように使用する：

<script> 
    module.exports = { 
     data: function() { 
      return { 
       obj: null 
      } 
     }, 
     created: function() { 
      this.$http.get(config.API_LOCAITON + '/call').then(res => { 
       // Do some business 
      }, res => { 
       // Handle some error 
      }); 
     } 
    } 
</script> 

これは動作しますが、windowを使用してアプリケーションの設定を処理することは悪い考えです。ここでより正式なアプローチは何ですか？

Answer 1

インポートします。

<script> 
    import config from "../config" 

    module.exports = { 
     data: function() { 
      return { 
       obj: null 
      } 
     }, 
     created: function() { 
      this.$http.get(config.API_LOCATION + '/call').then(res => { 
       // Do some business 
      }, res => { 
       // Handle some error 
      }); 
     } 
    } 
</script> 

または場所のみ。

<script> 
    import { API_LOCATION } from "../config" 

    module.exports = { 
     data: function() { 
      return { 
       obj: null 
      } 
     }, 
     created: function() { 
      this.$http.get(API_LOCATION + '/call').then(res => { 
       // Do some business 
      }, res => { 
       // Handle some error 
      }); 
     } 
    } 
</script>