How to send different url with different profiles in vue.js?-CodePudding

I have a following code:

this.$store.dispatch(GET_RESOURCE,
          // 'http://10.20.48.124:1001/get/data/'  -->this one for dev profile
          // 'http://10.20.48.124:8008/get/data/' -->this one for test profile
          'http://localhost:3000/get/data/'  -->this one for local profile
      );

Right now its hardcoded to work only in localhost, but when i will deploy it on dev it won't work. Is there any solution to make it work in any profile? Maybe having some type?

CodePudding user response：

This can be done by looking at the NODE_ENV variable to see which environment uou are in, and changing the url to match. Something like:

let baseURL = 'http://localhost:8080/devapi/1/api/'
if (process.env.NODE_ENV === 'production') {
  baseURL = 'https://example.com/api/v1/api/'
}

this.$store.dispatch(GET_RESOURCE, baseURL)

By default there are development and production environments. If you want to create more, e.g for test - create a file in the project root with the filename .env.test containing:

NODE_ENV=test

You can then run your npm commnds in the different environments - for example for vue-cli-service you can add --mode test

CodePudding user response：

All you are looking for is the dotenv for Vue. You can refer to the Official guide which explains how you can switch between environment variables in different environments (i.e. development, production, etc). Basically, you need to create .env, .env.development, .env.production etc files and keep your variables there. The rest of the things will be taken care of automatically. If there is a predefined way, there is no need to re-invent the wheel by checking NODE_ENV everytime you want to switch between environment variables.