Explication détaillée des étapes pour implémenter le proxy dans Vue

Cette fois, je vais vous donner une explication détaillée des étapes pour implémenter le proxy dans Vue. Quelles sont les précautions pour implémenter le proxy dans Vue. Voici des cas pratiques, jetons un coup d'œil.

Vue Framework Lors du développement, vous rencontrerez des problèmes inter-domaines. Vous pouvez configurer le contenu de proxyTable dans config/index.js et utiliser le proxy proxy.

// config/index.js 文件
proxyTable: {
   '/api': {
    target: 'http://192.168.149.90:8080/', // 设置你调用的接口域名和端口号
    changeOrigin: true,   // 跨域
    pathRewrite: {
     '^/api': '/'     
    }
   }
  },

Ici, il est entendu que '/api' est utilisé pour remplacer l'adresse dans la cible. Dans les composants ultérieurs, lorsque nous supprimons l'interface, nous utilisons directement api à la place. pour appeler 'http://192.168.149.90:8080/xxx /duty?time=2017-07-07 14:57:22', écrivez simplement '/api/xxx/duty?time=2017 -07-07 14:57:22'

Dans dev.env.jsConfigurer l'environnement de développementDemander l'adresse

// config/dev.env.js 文件
module.exports = merge(prodEnv, {
 NODE_ENV: '"development"',
 ADMIN_SERVER: '"/api/"',
});

Si vous demandez à axios le plug -in, la configuration est la suivante

const adminServer = axios.create({
 baseURL: process.env.ADMIN_SERVER,
});

Croyez-le Après avoir lu le cas dans cet article, vous maîtrisez la méthode. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de PHP. !

Lecture recommandée :

Explication détaillée des étapes de mise en œuvre du développement et du packaging multipages de Vue

Explication détaillée de l'utilisation du modificateur .sync dans Vue

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!