How to get environment variable from Quasar Framework

quasar, vuejs2

Solution

In `dev.env.js` and `prod.env.js` you write something like:

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  MY_VAR: '"something"'
})

Then you can use `process.env.MY_VAR` in your Quasar app code.

Notice the quote + double quote. The build process in Quasar uses Webpack's DefinePlugin (https://webpack.js.org/plugins/define-plugin/) which requires a JSON encoded value. Use `JSON.stringify()` for more complex values like JS Objects.

Problem

The environment variables are defined in `config/` directory `prod.env.js` and `dev.env.js`, how to get those variable on `.vue` file? I've tried using `process.env.MY_VAR` assuming it's nodejs built-in library, it gives an error: ``` [======= ] 34% (building modules){ SyntaxError: Unexpected token (1:5) ``` The minimal code in `.vue` file: ``` <template> <q-layout> <div class="layout-view"> <button class="primary" @click="foo"> <i class="on-left">lock</i> Login </button> </div> </q-layout> </template> <script> export default { data() { return { url: '' } } methods: { foo: function() { this.url = process.env.MY_VAR // no error if commented } } } </script> ``` What's the correct way to get those environment variable?

Original source