An introduction to how projects built based on Vue-cli interact with the backend

This article mainly introduces and explains in detail how projects built based on Vue-cli interact with the backend. The content is quite good. I will share it with you now and give it as a reference.

During this period of time, I have been using vue for development. I have used it before, but most of it used some simple data binding. After going through a lot of pitfalls, I summarized it. I hope it will be helpful to friends who have just started to struggle.

Frequently Asked Question 1: After setting up the environment with vue-cli, the local domain name and the domain name of the test environment are inconsistent. How to access the backend interface across domains?

Find index.js in the config directory and add the following under dev:

proxyTable: {
  '/api':{//指定以/api开头的接口都走代理
   target:'https://yhhdtest.moguyun.com',//需要连接后台接口的域名
   changeOrigin:true,//支持跨域
   pathRewrite:{
    '/api':''
   }
  }
 },

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

Request/api/getGame The actual request sent is https://yhhdtest.moguyun.com/getGame

Configure a background request suitable for local and production environments

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

Find dev and prod respectively under index.js (some projects may be extracted directly and made into separate files)

dev.env.js

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

prod.env.js

module.exports = {
 NODE_ENV: '"production"',
 API_HOST:'""'
}

The key point is API_HOST, our request at this time You can write like this

process.env.API_HOST+'/getGame'

The above is the entire content of this article. I hope it will be helpful to everyone’s study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About vue’s ideas for solving cross-domain routing conflicts

About vue.js front-end and back-end data Interaction operation of submitting data

Introduction to the process of reconstructing multi-page scaffolding based on vue cli

The above is the detailed content of An introduction to how projects built based on Vue-cli interact with the backend. For more information, please follow other related articles on the PHP Chinese website!