user616
user616

Reputation: 855

Vue firebase hosting environment variables

Currently in my dev environment i have my .env.development file with my firebase environment variables stored as:

VUE_APP_FB_API_KEY='abc123000123',
VUE_APP_FB_AUTH_DOMAIN='site.firebaseapp.com', 
etc...

This works fine for my dev machine but once i deploy this to firebase hosting it breaks and throws console errors that the various options are not configured. I tried adding them with

firebase functions:config:set env.VUE_APP_FB_API_KEY='abc123000123'

but this is still not working for me.

What is wrong here? Also per the docs upper-case characters are not allowed..

Upvotes: 2

Views: 2346

Answers (1)

ittus
ittus

Reputation: 22403

When you run on local, vue-cli will read .env.development config file. But when you build for production, it will use production mode and will read .env file.

You should copy .env.development to .env then build and deploy again.

Or you can create .env.production file, which is only used for production build.

.env # loaded in all cases

.env.local # loaded in all cases, ignored by git

.env.[mode] # only loaded in specified mode

.env.[mode].local # only loaded in specified mode, ignored by git

You can read more about the enviroment variable and build mode in vue-cli official document.

Upvotes: 6

Related Questions