Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add support for overriding the environment variables regex #5338

Open
tahpot opened this issue Mar 30, 2020 · 3 comments
Open

Add support for overriding the environment variables regex #5338

tahpot opened this issue Mar 30, 2020 · 3 comments
Labels
feature request

Comments

@tahpot
Copy link

tahpot commented Mar 30, 2020

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
Copy link
Member

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
Copy link
Author

tahpot commented Apr 5, 2020

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
Copy link
Member

LinusBorg commented Apr 5, 2020 •
edited
Loading

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 ...

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
feature request
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@tahpot @LinusBorg