Une introduction à la façon dont les projets construits sur la base de Vue-cli interagissent avec le backend

Cet article présente et explique principalement en détail comment les projets construits sur Vue-cli interagissent avec le backend. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Pendant cette période, j'ai utilisé Vue pour le développement, je l'ai déjà utilisé, mais la plupart utilisaient une simple liaison de données. Après avoir traversé de nombreux pièges, je l'ai résumé, j'espère que cela sera utile aux amis qui viennent de commencer à lutter.

FAQ 1 : Après avoir configuré l'environnement avec vue-cli, le nom de domaine local et le nom de domaine de l'environnement de test sont incohérents. Comment accéder à l'interface backend entre les domaines ?

Trouvez index.js dans le répertoire de configuration et ajoutez ce qui suit sous dev :

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

La configuration ci-dessus est en fait dev-server utilise le très puissant package http-proxy-middleware. Pour une utilisation plus avancée, veuillez consulter sa documentation.

Request/api/getGame La requête réelle envoyée est https://yhhdtest.moguyun.com/getGame

Configurer une requête en arrière-plan adaptée aux environnements locaux et de production

Après la configuration conformément à ce qui précède, l'environnement local peut interagir avec succès avec le backend sur tous les domaines. Cependant, chaque interface doit être précédée d'un préfixe /api inutile, ce qui est en fait incompatible avec notre production. À ce stade, nous devons effectuer une certaine configuration et la distinguer via la compilation.

Trouvez respectivement dev et prod sous index.js (certains projets peuvent être extraits directement et transformés en fichiers séparés)

dev.env.js

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

prod.env.js

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

Le point clé est API_HOST, notre la demande peut être écrite comme ceci

process.env.API_HOST+'/getGame'

Ce qui précède est l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Veuillez faire attention. vers du contenu plus connexe.

Recommandations associées :

À propos des idées de vue pour résoudre les conflits de routage entre domaines

À propos du front-end vue.js et données back-end Opération d'interaction de soumission de données

Introduction au processus de reconstruction d'un échafaudage multipage basé sur vue cli

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!