[Vuejs]-Using external variable in webpack bundle

by

0👍

✅

You can put appconfig.json in your dist folder and fetch it with axios in your /src/main.js, for example:

// your imports here
// ...

if(process.env.NODE_ENV === 'production') {
    axios.get('./appconfig.json')
        .then(response => {
            const config = response.data;
            const host = axios.defaults.baseURL = config.baseURL;
            // other production configs

            new Vue({
                el: '#app',
                router,
                components: {App},
                template: '<App/>'
            });
        });
} else {
    // dev configs

    new Vue({
        el: '#app',
        router,
        components: {App},
        template: '<App/>'
    });
}

Changing properties in appconfig.json changes settings inside the app after the user refreshes the page without having to rebuild or restart server.

Leave a comment