CODEWITHSUNDEEP
vue.jswebpacksingle-page-application
jp.palubs
jp.palubs

Reputation: 178

external .env for bundled vue-cli SPA

I tried to use dotenv-webpack, but the .env also included in the bundle. What I wanted to do is to make the .env readable after the build.

static/ 
index.html
.env

is this possible on spa's?

Upvotes: 0

Views: 130

Answers (2)

Deniz
Deniz

Reputation: 1503

No, this is not possible with the standard Vue-CLI/Webpack unless you search inside the bundled gibberish of your code.

If your intention is to do something with the bundled data like changing values inside your .env then there is a way to hook your app with a env.js file, but this should not contain sensitive data.

Explanation of post- "env.js" hook:

you have to check for a global variable somewhere in you code. i make a example of changing the axios baseURL after bundling the project.

place a js file like "env.js" in the first place of initialization in your web server.

// env.js
document.env = 'https://www.use-other-api.com'

so "document.env" is now declared before your app runs

then you have a hook in your project which is prepared for this "after bundled env changes" like:

if (document.env === 'https://www.use-other-api.com') {
   // change axios baseURL to "document.env"
} else {
   // stay default baseURl
}

and that's it. just be aware of not using any sensitive data in this scope because it is accessible anywhere in your app. like i would not recommend you to put in some secrets depending in your backend stuff.

Upvotes: 1

Abregre
Abregre

Reputation: 480

No, the .env file should be loaded on the server that runs your app. That's what it's name stands for. It consists of enviromental variables that you can use globally.

You can find more... https://codeburst.io/process-env-what-it-is-and-why-when-how-to-use-it-effectively-505d0b2831e7

Upvotes: 0

Related Questions