How to get environment variable from Quasar Framework

Question

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?

Answer 1

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.