Add support for overriding the environment variables regex

[tahpot]

What problem does this feature solve?

At the moment, only environment variables prefixed with VUE_APP_ are loaded into process.env.

I have a third party library that configures itself using environment variables, however those variables can't load as they aren't Vue.js specific.

What does the proposed API look like?

I can work around the issue in vue.config.js:

module.exports = {
    configureWebpack: config => {
        const prefixRE = /^VERIDA_/;
        Object.keys(process.env).forEach(key => {
            if (prefixRE.test(key)) {
                config.plugins[1].definitions['process.env'][key] = JSON.stringify(process.env[key]);
            }
        });
    }
}

This is a huge hack however. I'm suggesting a new configuration option be added to @vue/cli-service/lib/util/resolveClientEnv.js, so that it's possible to provide a custom regex that defines the environment variables that should be made available to Vue.

[LinusBorg]

I would not consider this a hack in principle - we do have these webpack APIs for a reason, and this seems like one of those.

if you find this part to be particularly "hacky":

config.plugins[1].definitions['process.env'][key] = JSON.stringify(process.env[key]);

Then instead of adding your variables to the existing DefinePlugin, you could add a second Plugin instance and thereby have a clean API.

Alternatively, use the chainWebpack aPI which will offer a clean interface to add to the existing config.

[tahpot]

Sure, that is possible.

I guess my point is that Vue.js is fundamentally breaking environment variables, so I see it has a responsibility to make it easy to fix that.

[LinusBorg]

Vue.js is fundamentally breaking environment variables

How? Or: What would the expected behaviour be? That every system environment variable that is available on process.env is available in your Vue app, the code delivered to your end users' browsers?

That's not a wise default ...