To start with, could you take a look at this article? it describes the path you’d need to take from “setting variables for build” to “seeing them reflected at browse time”:
Could you explain how you are handling the interpolation step, and where you’re looking to see those variables set (and how you’re looking)? I bet we can help resolve things in case that article doesn’t lead you to a working conclusion already
Glad to hear you got things worked out, and thanks SO much for the follow up to explain your solution! I wasn’t aware of the $VUE_APP_* pattern until you clued me in - thanks so much! Gatsby does a similar thing with $GATSBY_*.
That isn’t the only solution to your situation - interpolating the variable values as that article suggests will work with every framework, Vue, Gatsby, and a simple shell script too, but if you’re happy with that solution I don’t see any problems with it.
Would like to triple-mention something that a different teammate brought up to me and that I added to the doc but you might have missed:
there IS a compelling reason NOT to use $VUE_APP_* (or similar pattern for other frameworks) for ALL environment variables: those values get bundled into your output JS even if you don’t later use them in your client-side code, so ANYONE can see them. Not a good idea for API tokens and the like!
First of all, thanks for letting us know in here.
Luckily I only need to change the backend url, so that would work fine. I guess I’ll get back to your docs at a later time then