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!

CodePudding user response：

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.

CodePudding user response：

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",