vue directly modify the requested interface address on the server side

A project may have many environments, development, testing, pre-production, production and other environments. If each environment needs to be repackaged, it will seem more troublesome. So how to solve this problem?

In vue, uniapp and other frameworks, all can be solved as follows

Create a new file under static resources, the vue project is created under public file, and the uniapp is created under static file

The file format is as follows

{
  "name": "development",
  "base": "/customer"
}

name represents the environment, which is convenient for directly checking what environment is on the server. The base is the requested address. If the server does not act as a proxy, the base here should be the complete request address http:// /customer, similar to this

Most people can't get the address in this process because it is caused by asynchronousness. If you want to solve it, you can do it in or in

('./')
 .then(function (res: any) {
  // handle success
.BASE_URL = ;
  new Vue({
   router,
   store,
   render: h => h(App)
  }).$mount('#app')
 })

There is a problem with this: the project will only start rendering after the request for this json is successful. At this time, you can do a loading animation. The request should be very fast. If the request fails, you can do a catch operation in axios, give a friendly prompt, or something, and make a re-request

So how did you get it?

You can obtain and then splice the request address in the interceptor

In that js file of the interceptor

function getBaseUrl() {
  return .BASE_URL
}

Finally passed inurlSplicing when，as follows
url: getBaseUrl() + , // optsIt is a parameter object passed

That's how you can request it normally

In general, you can configure your development address in the development environment. Finally, after it is deployed to the server through automated packaging, if you want to change it to the address of another environment (test, pre-production, production), you can directly modify this file on the server.

The job is done, haha

The above is the detailed content of vue directly modifying the requested interface address on the server side. For more information about vue modifying the requested interface address, please follow my other related articles!