Vue App environment variables can be read in development mode but not in production mode

Question

I am using the Vue cli to create a vue app with Firebase as my backend.

A file within my app initializes the Firebase DB by referring to environment variables that are defined in .env files.

.env

FIREBASE_API_KEY=#################################
FIREBASE_AUTH_DOMAIN=#################################
FIREBASE_DB_URL=https://#################################
FIREBASE_PROJECT_ID=#################################
FIREBASE_STORAGE_BUCKET=#################################
FIREBASE_MESSAGING_SENDER_ID=#################################
AUTH_API=https://#################################

.env.development.local and .env.production.local contain the same data.

Within my app I have a file that looks like this:

credentials.js

export default {

config: {
apiKey: process.env.VUE_APP_FIREBASE_API_KEY,
authDomain: process.env.VUE_APP_FIREBASE_AUTH_DOMAIN,
storageBucket: process.env.VUE_APP_FIREBASE_STORAGE_BUCKET,
databaseURL: process.env.VUE_APP_FIREBASE_DB_URL,
projectId: process.env.VUE_APP_FIREBASE_PROJECT_ID,
messagingSenderId: process.env.VUE_APP_FIREBASE_MESSAGING_SENDER_ID
}

}

When I serve the development version of this app using yarn serve , the database is initialized, so the.env variables are obviously read without a problem. However, when I use yarn build and then serve the resulting files in dist , I get an error on the console:

 @firebase/database: FIREBASE FATAL ERROR: Can't determine Firebase Database URL.  Be sure to include databaseURL option when calling firebase.initializeApp().  

Which is basically telling me that the environment variables are not being read in production mode.

Here is my package.json:

{
  "name": "web-app",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@firebase/firestore": "^1.9.3",
    "axios": "^0.19.0",
    "core-js": "^3.3.2",
    "element-ui": "^2.12.0",
    "feather-icons": "^4.24.1",
    "firebase": "^7.2.3",
    "firebase-admin": "^8.9.2",
    "firebase-functions": "^3.3.0",
    "localforage": "^1.7.3",
    "node-ipc": "^9.1.1",
    "vue": "^2.6.10",
    "vue-feather": "^1.0.0",
    "vue-feather-icons": "^5.0.0",
    "vue-router": "^3.1.3",
    "vue2-animate": "^2.1.3",
    "vuedraggable": "^2.23.2",
    "vuefire": "^2.2.0",
    "vuex": "^3.1.1",
    "vuex-persist": "^2.1.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "babel-eslint"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ]
}

Can anyone tell me what might be causing this?

Answer 1

You need to prefix your variables with VUE_APP_ in your .env files.

From https://cli.vuejs.org/guide/mode-and-env.html#environment-variables :

Note that only variables that start with VUE_APP_ will be statically embedded into the client bundle with webpack.DefinePlugin .