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

Cet article présente principalement les idées de Vue pour résoudre le problème des conflits de routage entre domaines. Il a une certaine valeur de référence. Maintenant, je le partage avec vous. Les amis dans le besoin peuvent s'y référer

Vue. js (prononciation / vju/, similaire à view) est un framework progressif pour la création d'interfaces utilisateur. Cet article vous donne une introduction détaillée à l'analyse des idées de Vue pour résoudre les conflits de routage entre domaines. Les amis qui en ont besoin peuvent se référer à

Introduction à Vue

Vue. js (prononcé /vjuː/, similaire à view) est un framework progressif pour la création d'interfaces utilisateur.

Vue se concentre uniquement sur la couche de vue et adopte une conception de développement incrémental ascendant.

L'objectif de Vue est de permettre une liaison de données réactive et des composants de vue composés via l'API la plus simple possible.

Vue est très simple à apprendre. Ce tutoriel est basé sur le test de la version Vue 2.1.8.

Lorsque nous configurons le proxy suivant dans le routage, nous pouvons résoudre le problème inter-domaines

proxyTable: {
   '/goods/*': {
    target: 'http://localhost:3000'
   },
   '/users/*': {
    target: 'http://localhost:3000'
   }
  },

Cette méthode de configuration résout le problème inter-domaines dans une certaine mesure, mais cela entraînera quelques problèmes,

Par exemple, notre route de vue est également nommée marchandises, ce qui provoquera des conflits

S'il y a de nombreuses interfaces dans le projet, c'est très gênant et facile. pour les configurer tous ici. Un conflit de routage se produit.

Posture correcte

Si toutes les interfaces sont unifiées et standardisées comme une seule entrée, les conflits seront résolus dans une certaine mesure

Unifiez les configurations ci-dessus avec /api/ devant eux

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000'
   },
  },

Si nous le configurons de cette manière, cela changera lors de l'utilisation de la requête http. Une API sera ajoutée devant la requête, la route relative changera également et une API sera ajoutée. devant l'interface. Il sera très difficile de se connecter à l'API. Nous pouvons utiliser les méthodes suivantes pour résoudre ce problème

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000',
    pathRewrite:{
     '^/api':'/'
    }
   },
  },

Le code ci-dessus consiste à supprimer notre interface API virtuelle pour le moment. , on va en fait au backend pour demander l'heure, le préfixe api ne sera pas ajouté, donc quand on fait une requête http front-end, il faut aussi ajouter le préfixe api pour correspondre au proxy Le code est le suivant :

Nous pouvons utiliser la baseUrl d'axios La valeur directe par défaut est api, de sorte qu'à chaque fois que nous y accédons, le préfixe api est automatiquement ajouté, et nous n'avons pas besoin d'écrire manuellement ce préfixe sur chaque interface nous-mêmes

logout(){
  axios.post('/api/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  axios.post('/api/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

La configuration dans le fichier d'entrée est la suivante :

Si vous configurez 'api/', il lira le domaine local par défaut

import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = 'api'

Si configuré comme ça, l'environnement de production et de développement ne sera pas distingué

Dans le dossier config Créez un nouveau fichier de configuration api.config.js

puis introduisez-le dans main.js. Cela peut garantir que le préfixe de définition de la production et du développement correspond dynamiquement

const isPro = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
 baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

via ce qui précède. Après la configuration, il est facilement accessible dans le dom, et il n'est pas nécessaire d'introduire le module axios dans aucun composant.

import apiConfig from '../config/api.config'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl

Le code final

logout(){
  this.$http.post('/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  this.$http.post('/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

est configuré dans le proxy

api.config.js dans la config est configuré

proxyTable: {
   '/api/**': {
    target: 'http://localhost:3000',
    pathRewrite:{
     '^/api':'/'
    }
   },
  },

dans la config dossier Créez-y un nouveau fichier de configuration api.config.js

Je ne connais pas grand-chose à la configuration de production et de développement

const isPro = Object.is(process.env.NODE_ENV, 'production')
module.exports = {
 baseUrl: isPro ? 'http://www.vnshop.cn/api/' : 'api/'
}

Vous pouvez aller sur dev-server.js pour voir le code de configuration

Configurer

const webpackConfig = (process.env.NODE_ENV === 'testing' || process.env.NODE_ENV === 'production') ?
 require('./webpack.prod.conf') :
 require('./webpack.dev.conf')

dans le fichier d'entrée main.js pour demander l'API dans le dom

import apiConfig from '../config/api.config'
import Axios from 'axios'
import VueAxios from 'vue-axios'
Vue.use(VueAxios, Axios)
Axios.defaults.baseURL = apiConfig.baseUrl

logout(){
  this.$http.post('/users/logout').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 },
 getGoods(){
  this.$http.post('/goods/list').then(result=>{
   let res = result.data;
   this.nickName = '';
   console.log(res);
  })
 }

PS : Apprenons les paramètres inter-domaines sous Vue à travers un morceau de code1. Des problèmes inter-domaines sont souvent impliqués. lors du développement avec vue. En fait, dans vue cli Il y a des fichiers dans lesquels nous configurons des requêtes inter-domaines.

2. Lorsque les requêtes inter-domaines ne peuvent pas être effectuées, nous pouvons modifier la partie dev:{} dans index.js dans le dossier de configuration sous le projet.

Définissez la cible sur le nom de domaine auquel nous devons accéder.

dev: {
  env: require('./dev.env'),
  port: 8080,
  autoOpenBrowser: false,
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  proxyTable: {
    '/api': {
      target: 'http://api.douban.com/v2',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    }
  },
  // CSS Sourcemaps off by default because relative paths are "buggy"
  // with this option, according to the CSS-Loader README
  // (https://github.com/webpack/css-loader#sourcemaps)
  // In our experience, they generally work as expected,
  // just be aware of this issue when enabling this option.
  cssSourceMap: false
}

3. Définissez ensuite les attributs globaux dans main.js :

4 À ce stade, nous pouvons utiliser ce nom de domaine globalement, comme suit :

Vue.prototype.HOST = '/api'

.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère qu'il sera utile à l'étude de chacun. Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois !

var url = this.HOST + '/movie/in_theaters'
  this.$http.get(url).then(res => {
   this.movieList = res.data.subjects;
  },res => {
   console.info('调用失败');
  });

Recommandations associées :

Comment résoudre le problème du chemin d'accès incorrect après avoir empaqueté l'image d'arrière-plan Vue

Vue- cli proxyTable Comment résoudre le problème inter-domaines de l'environnement de développement

Comment résoudre le problème de Vue 2.0 ouvrant la page du projet vierge dans IE11

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!