I'm working on a VueJS app that uses env vars in multiple places. It runs on GCloud with nginx serving the files compiled with vue-cli-service build.
When developing everything works well with the env vars set in .env.development and .env.development.local files and used in JS with process.env.VUE_APP_FOO. I'm not using .env.production as some of these env vars shouldn't be committed to our repository.
For the staging and prod environment of all of our projects, we use GCloud's config maps which let us provide env vars to the pods. The issue in this project is that vue-cli-service build requires the env vars to be available at build time, which is not the case in our setup. Config maps are only available in the pods that run the images.
Out of curiosity, I checked the compiled code and all uses of process.env are quite simply replaced by an object with all vue env vars (basic ones + VUE_APP_* ones). So for example,
console.log(process.env.VUE_APP_FOO);
is compiled to
console.log(Object({NODE_ENV: "production", BASE_URL: "/", VUE_APP_FOO: "bar"}).VUE_APP_FOO);
Except that in our case, VUE_APP_FOO is missing from the object as it's not available in the environment when building the app.
So as is, it doesn't seem possible to provide env vars when the server is started or the JS file is served. Is there a way to tell vue-cli-service to not compile the env that way? Or any other alternative?
The only one I found so far is to replace the uses of env vars with their actual value directly in the compiled JS file when the pod starts using sed, but that's pretty ugly and could break easily.