About configure api addresses in different environments.

• vue-cli3 can use additional .env files to add different env variables.

.env                # variables loaded in all envs
.env.local          # variables loaded in all env, but will ignore by git
.env.[mode]         # variables loaded in specific env
.env.[mode].local   # variables loaded in specific env, but will ignore by git

• PS: In .env file, self configuration variable name must follow the format "VUE_APP_YOURVARIABLE"

Example

// .env file
NODE_ENV = 'development'
VUE_APP_TITLE = 'development'
VUE_APP_URL = "http://www.yourdomain.dev.com"



// .env.test file
NODE_ENV = 'test'
VUE_APP_TITLE = 'test-build'
VUE_APP_URL = "http://www.yourdomain.test.com"

// .env.production file
NODE_ENV = 'production'
VUE_APP_TITLE = 'production'
VUE_APP_URL = "http://www.yourdomain.com"

• After config all .env files, update build script in pacakge.json file

{
    //.. code
      "scripts": {
            "serve": "vue-cli-service serve",
            "build": "vue-cli-service build",
            "production": "vue-cli-service build --mode production",
            "test-build": "vue-cli-service build --mode test",
            // other build scripts...
        },
    //.. code
}

References

• VUE-CLI , Modes and Environment Variables #Modes.