SoFunction
Updated on 2025-04-04

Detailed explanation of how projects built on Vue-cli interact with the background

During this period, I have been working on Vue for development and have used it before, but most of them use some simple data binding. I have taken a lot of pitfalls and summarized it. I hope it will be helpful to my friends who have just started to make trouble.

FAQ 1: After using vue-cli to set up the environment, the domain name of the local domain name and the test environment are inconsistent. How to access the backend interface across domains?

Find it in the config directory and add it as follows under dev:

proxyTable: {
  '/api':{//Specify that all interfaces starting with /api are proxy   target:'',//The domain name that needs to be connected to the background interface   changeOrigin:true,//Support cross-domain   pathRewrite:{
    '/api':''
   }
  }
 },

The above configuration is actually the dev-server uses a very powerful http-proxy-middleware package. For more advanced usage, please consult its documentation.

The request actually sent by /api/getGame is /getGame

Configure a background request for local and production environments

After following the above configuration, the local environment can successfully interact with the background across domains. However, each interface must be prefixed with an originally unnecessary /api prefix, which is actually inconsistent with our production. At this time, we need to do some configuration and distinguish them through compilation.

Find dev and prod respectively below (some projects may be extracted directly and made into separate files)


 = merge(prodEnv, {
 NODE_ENV: '"development"',
 API_HOST:'"/api/"'
})


 = {
 NODE_ENV: '"production"',
 API_HOST:'""'
}

The key point is API_HOST. At this time, our request can be written like this.

.API_HOST+'/getGame'

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.