1

I am trying to expose env variables to my other js files. So i have other JS files that i structured it so that api's and model lives in its own file and folder and when i want to use them i will import it using

import Auth from '@services/api/auth'

And in that file i would like to expose env variables like how i can do it in vue components script file like

<script>
import login from '@/components/view/login/login'

export default {
    components: {
        login
    },
    created () {
        console.log(process.env.API_BASE_URL)
    }
}
</script>

So i am using standard Vue 2.5 with webpack 3.1 and currently i can call process.env.API_BASE_URL inside .vue file but if i try to call that in imported .js file i get undefine.

Like this

import Axios from 'axios'

export default {
    login (username, password) {
        return new Promise((resolve, reject) => {
            console.log(process.ENV.API_BASE_URL)
            let url = process.ENV.API_BASE_URL + 'oauth2/token'
            let body = {
                username: username,
                password: password,
                scope: process.ENV.API_SCOPE.LOGIN.scope,
                grant_type: process.ENV.API_SCOPE.LOGIN.grant_type
            }
            let header = {
                auth: {
                    username: process.ENV.API_CLIENT.LOGIN.username,
                    password: process.ENV.API_CLIENT.LOGIN.password
                }
            }
            return Axios.post(url, body, header)
                .then(res => {
                    resolve(res)
                })
                .catch(err => {
                    reject(err)
                })
        })
    }
}
Patrick
  • 781
  • 2
  • 5
  • 23
Photonic
  • 1,316
  • 19
  • 31
  • 1
    Shouldn't it be `process.env` inside the module, instead of `process.ENV`? – gvk Oct 24 '18 at 08:36
  • possible duplaicte of this https://stackoverflow.com/questions/37656592/define-global-variable-with-webpack and you can check out this article https://medium.com/@justintulk/passing-environment-variables-into-your-code-with-webpack-cab09d8974b0 – Shyam Babu Oct 24 '18 at 08:36
  • @gvk yes i already tried that. Shyam Babu i already read that article but that is resulting to using dotenv packet with .env file which i do not want to use because vuejs with webpack already has its own environment setup and also using .env i cannot store object in that file – Photonic Oct 24 '18 at 08:49
  • @gvk yes i tried it again and it working now... due to my previous statement i was calling nested object that was why it didnt work. Thanks dude – Photonic Oct 24 '18 at 08:57
  • Cool. But for what it's worth, you really should update your webpack template to use `dotenv` [https://www.npmjs.com/package/dotenv] instead of the default that loads env from the files in `config/` directory. Since this config directory could be committed to source control, it sort of misses the point of having environment variables. The objects you want from env should be passed as separate variables. For example, `env.API_CLIENT.LOGIN.username` could just be `env.API_LOGIN` etc... – gvk Oct 24 '18 at 09:45

0 Answers0