0

I have two .env files in my Vue 2.2.3 project, .env.development and .env.production.

In each .env file I have assigned VUE_APP_API_URL variable to different values - one for my local development environment and the other the production server.

Running npm run build compiles the app into the dist folder locally without any issues. However, when I deploy the dist to my server logging the VUE_APP_API_URL inside my Vue app comes back undefined.

This is the first time I have done this so I may be missing something. Is there something else I must do to have the .env.production URL to work with the build?

Thanks in advance for any help!

mikeym
  • 5,705
  • 8
  • 42
  • 62
  • I recommend using this approach (question asked earlier today): https://stackoverflow.com/a/74059267/8816585 – kissu Oct 13 '22 at 21:35
  • can you please share on the package.json the string behind the scripts.build? – Andres Abadia Oct 14 '22 at 00:12
  • 1
    How **exactly** are you logging the `VUE_APP_API_URL` variable? Show the code! – Michal Levý Oct 14 '22 at 04:31
  • @MichalLevý To know if you failed to something do that. In your IDE (vscode can) search for all occurence `VUE_APP_API_URL`, if you see it inside some file in dist\js it say the variable is available. (I do not talk about the occurence when you call it, you need to see the variable and value for example `NODE_ENV:"production",VUE_APP_API_URL:"https://my-url.com"`) – Raphael Rlt Oct 14 '22 at 06:20
  • @MichalLevý There's not much to it but here it is`console.log('ENV URL -> ', process.env.VUE_APP_API_URL)` – mikeym Oct 14 '22 at 16:55

2 Answers2

0

My recommendation is: Do not overcomplicate. Just use one single .env file.

Just make sure to don't push it to the repo, otherwise it would be public. That's all.

I my config I've got: .env for dev with the constants in there.

Then In the production enviroment you just set the Variables there.

Despertaweb
  • 1,672
  • 21
  • 29
0

You should not push .env.production to git repo but if you really want to do it, on build command you can do like this on package.json file

"build": "cp .env.production .env && vue-cli-service build",
Binh Ho
  • 3,690
  • 1
  • 31
  • 31
  • If gitignored, this will still not work haha. – kissu Oct 14 '22 at 13:25
  • 1
    Sorry, but I don't understand what pushing `.env` to git will do to solve the issue. For the record, I never push `.env` files to git as that defeats the purpose. – mikeym Oct 14 '22 at 16:59