Using env variables inside Vue

Hi, and excellent work!

I’ve tried creating a “.env” file, and editing Webpack to include additional environmental variables, but both methods fail for similar reasons.

So while environmental variables in the “.env” file pass npm run watch I get errors in Chrome if I attempt to use them:

mounted () {
  console.log("Index", VUE_APP_VAR)
}

ReferenceError: VUE_APP_VAR is not defined

If I use them inside Webpack, it renders the variables, but then fails to recognise them as such (I was using them in Axios).

What would the correct method be?

[OctaneInteractive]

I had to use:

new Dotenv({
  path: './.env',
}),

Without the path it wouldn’t work.

Thanks for the assistance — much appreciated!

[OctaneInteractive]

Ah that’s weird, because by default it’s alrady ./.env 🤔

That’s what I assumed. Yes, weird.