Can not access process.env properties dynamically

  • I can’t understand how this can happen but process.env properties can only be accessed statically, not dynamically.

    So I created a dummy project and set env property in quasar.config.js like this:

     build: {
          vueRouterMode: 'hash', // available values: 'hash', 'history'
          env: {
            VUE_APP_TEST: "THIS IS A TEST",
          extendWebpack (cfg) {
              enforce: 'pre',
              test: /\.(js|vue)$/,
              loader: 'eslint-loader',
              exclude: /node_modules/

    Then I created this simple page:

      <q-page class="flex flex-center">
          <li>{{ msg1 }}</li>
          <li>{{ msg2 }}</li>
    export default {
      name: 'PageIndex',
      data: function () {
        return {
          msg1: "",
          msg2: ""
      mounted() {
        this.msg1 = process.env.VUE_APP_TEST;
        let key = "VUE_APP_TEST";
        this.msg2 = process.env[key];
        console.log(this.msg2); // show undefined

    So this.msg1 show correctly THIS IS A TEST but this.msg2 show nothing and console.log return undefined.


    My questions are :

    1. There is a way for me to access process.env properties dynamically?
    2. How only dynamic access can be restricted in an object property?


  • This post is deleted!

  • Hi @metalsadman. Thank you for answer my question.

    Now I understand this witchcraft. 🙂 But still, there is something that bugs me. Because this used to work before.

    I use a “helper” to access env variables as shown here

    it is a simple plugin:
    module.exports = function (key, fallback) {
    return process.env[key] || fallback

    So I could have in my template something like:
    <img class=“logo” :src="$envHelper(‘STATIC_IMAGES_URL’) + ‘/my_logo.png’" />

    It doesn’t work anymore, but it was working until my last update. Maybe some change in Webpack ?

    I guess my best option now is to use mixin, but it kind of kill, at least for me, all point of using process.env.

    Oh well. Thank you anyway.

  • @cristiano-moraes said in Can not access process.env properties dynamically:

    It doesn’t work anymore, but it was working until my last update. Maybe some change in Webpack ?

    try setting the variable like this:

          env: {
            VUE_APP_TEST: JSON.stringify("THIS IS A TEST"),

    ach and maybe another little thing - if you are using this in :src then bear in mind, that there should be no spaces in URLs (convert them to %20 for example).

  • Hi @qyloxe, thank you for your answer.

    Unfortunately, adding JSON.stringify, make no difference to solve this issue. process.env[key] still returns undefined, for the reason Metalsadman explained I guess.

    About the URL, it has no space. The problem is that $envHelper(‘STATIC_IMAGES_URL’) + ‘/my_logo.png generates “<my_domain>/undefined/my_logo.png”


  • If you are using q/app 2.+ DO NOT stringify it as q/app does that internally. See upgrade guide for more info.

Log in to reply