vuejs configuration: using a global variable?

Question

This seems dumb, but I have it setup like this:

in config/index.js:

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

then in src/app.js I have:

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;

Then in src/components/home.vue, I have a script block that uses it like so:

<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>

This works but it strikes me as a bad idea to use window to handle an application configuration. What's the more canonical approach here?

Answer 1

Import it.

<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>

Or just the location.

<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>

Answer 2

PROD: config/prod.env.js append your VAR='"value"'

'use strict'
module.exports = {
  NODE_ENV: '"production"',
  API_LOCATION: '"https://production URL"'
}

DEV: config/dev.env.js append your VAR='"value"'

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_LOCATION: '"http://localhost"'
})

Your variable will available in process.env.API_LOCATION or process.env.VAR_NAME

Answer 3

Simply set ip path(or localhost) in local storage when login successfull and get value from local storage where you need through out the project. here how you set value in localstrage.

// Set value in IpAdress localstorage.setItem('IpAddress','192.168.100.100:8080');

// Get value from IpAddress localstorage.getItem('IpAddress');

in my case whole path looks like: localstorage.getItem('IpAddress')+/api/controller/method|