Über Vues Ideen zur Lösung von domänenübergreifenden Routing-Konflikten

Dieser Artikel stellt hauptsächlich die Ideen von Vue zur Lösung des Problems domänenübergreifender Routing-Konflikte vor. Jetzt kann ich ihn mit Ihnen teilen.

Vue. js (Aussprache / vju/, ähnlich view) ist ein fortschrittliches Framework zum Erstellen von Benutzeroberflächen. Dieser Artikel gibt Ihnen eine detaillierte Einführung in die Analyse der Ideen von Vue zur Lösung von domänenübergreifenden Routing-Konflikten. Freunde, die sie benötigen, können sich auf

Vue-Einführung

Vue. js (ausgesprochen /vjuː/, ähnlich wie view) ist ein progressives Framework zum Erstellen von Benutzeroberflächen.

Vue konzentriert sich nur auf die Ansichtsebene und verwendet ein inkrementelles Entwicklungsdesign von unten nach oben.

Vues Ziel ist es, eine reaktionsfähige Datenbindung und zusammengesetzte Ansichtskomponenten über eine möglichst einfache API zu ermöglichen.

Vue ist sehr einfach zu erlernen. Dieses Tutorial basiert auf dem Versionstest von Vue 2.1.8.

Wenn wir den folgenden Proxy im Routing konfigurieren, können wir das domänenübergreifende Problem lösen

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

Diese Konfigurationsmethode löst das domänenübergreifende Problem bis zu einem gewissen Grad, wird es aber tun Bringen Sie einige Probleme mit sich.

Zum Beispiel ist unsere Vue-Route auch als Ware bezeichnet, und zu diesem Zeitpunkt treten Konflikte auf.

Wenn das Projekt viele Schnittstellen enthält, ist dies sehr problematisch Konfigurieren Sie sie alle hier, und es ist einfach, Routenkonflikte zu generieren.

Korrekte Haltung

Wenn alle Schnittstellen als ein Eingang vereinheitlicht und standardisiert sind, werden Konflikte bis zu einem gewissen Grad gelöst.

Vereinheitlichen Sie die oben genannten Konfigurationen mit /api/ vor sie

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

Wenn wir es auf diese Weise konfigurieren, wird eine API vor der Anfrage hinzugefügt Die Schnittstelle. Dies wird auch sehr problematisch sein.

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

>Der obige Code dient dazu, unsere virtuelle API-Schnittstelle zu entfernen Wenn wir eine Front-End-HTTP-Anfrage stellen, müssen wir nach dem Hinzufügen des API-Präfixes auch das API-Präfix hinzufügen, das mit dem Proxy übereinstimmt. Der Code lautet wie folgt:

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);
  })
 }

Wir können verwenden Die Basis-URL von Axios wird standardmäßig direkt zur API hinzugefügt. Auf diese Weise wird das API-Präfix bei jedem Besuch automatisch hinzugefügt, und wir müssen dieses Präfix nicht manuell auf jede Schnittstelle schreiben Die Eintragsdatei lautet wie folgt:

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

Wenn diese Konfiguration 'api/' standardmäßig die lokale Domäne liest

Wenn sie so konfiguriert ist, werden die Produktions- und Entwicklungsumgebungen nicht unterschieden

Erstellen Sie eine neue api.config.js im Konfigurationsordner. Die Konfigurationsdatei

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

wird dann in main.js eingeführt, was eine dynamische Übereinstimmung des Produktions- und Entwicklungsdefinitionspräfixes

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

Nach der obigen Konfiguration kann problemlos im Dom darauf zugegriffen werden. Es ist nicht erforderlich, das Axios-Modul in eine Komponente einzuführen.

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);
  })
 }

Endgültiger Code

Konfigurieren Sie im Proxy

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

Konfigurieren Sie api.config.js in config

Erstellen Sie eine neue API im Konfigurationsordner .config .js-Konfigurationsdatei

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

Ich weiß nicht viel über Produktions- und Entwicklungskonfiguration

Sie können zu dev-server.js gehen, um den Konfigurationscode anzuzeigen

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

In den main.js-Eintrag Konfigurieren Sie

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

in der Datei, um die API-Geste im Dom anzufordern

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

: Lassen Sie uns anhand eines Codes lernen. Domänenübergreifende Einstellungen unter Vue 1. Bei der Entwicklung mit Vue treten häufig domänenübergreifende Probleme auf. Tatsächlich gibt es Dateien in Vue CLI uns, domänenübergreifende Anfragen einzurichten. 2. Wenn domänenübergreifende Anfragen nicht gestellt werden können, können wir den Teil dev:{} in index.js im Konfigurationsordner unter dem Projekt ändern.

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
}

Setzen Sie das Ziel auf den Domainnamen, auf den wir zugreifen müssen.

3. Legen Sie dann das globale Attribut in main.js fest:

Vue.prototype.HOST = '/api'

4. An dieser Stelle können wir diesen Domainnamen wie folgt global verwenden:

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

Das ist Es wird erwartet, dass der gesamte Inhalt dieses Artikels für das Studium aller hilfreich ist. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website.

Verwandte Empfehlungen:

So lösen Sie das Problem des falschen Zugriffspfads nach dem Packen des Vue-Hintergrundbilds

Vue- cli ProxyTable So lösen Sie das domänenübergreifende Problem der Entwicklungsumgebung

So lösen Sie das Problem, dass Vue 2.0 die Projektseite in IE11 leer öffnet

Das obige ist der detaillierte Inhalt vonÜber Vues Ideen zur Lösung von domänenübergreifenden Routing-Konflikten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!