The .env.Production variable is undefined after Vue is built

Question

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

In each .env file, I have assigned the VUE_APP_API_URL variable to a different value - one for my local development environment and another For use on production servers.

Running npm run build compiles the application into the local dist folder without any problems. However, logging VUE_APP_API_URL in my Vue application returns undefined when I deploy dist to my server.

This is my first time doing this, so I might be missing something. Is there anything else I have to do in order for the .env.production URL to work with the build?

Thanks in advance for your help!

Answer 1

My advice is: don’t overcomplicate it. Just use a .env file.

Please make sure not to push it to the repository or it will be made public. That's all.

My configuration is: .env for dev, which contains constants.

Then in production you just set the variable there.