vuejs configuration: using a global variable?

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?

Answers:

Answer

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

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

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|

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.