Detaillierte Erläuterung der Schritte zur Implementierung eines Proxys in Vue

Dieses Mal werde ich Ihnen die Schritte zur Implementierung von Proxys in Vue ausführlich erläutern. Was sind die Vorsichtsmaßnahmen für die Implementierung von Proxys in Vue?

Vue Framework Bei der Entwicklung treten domänenübergreifende Probleme auf. Sie können den ProxyTable-Inhalt in config/index.js konfigurieren und den Proxy-Proxy verwenden.

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

Hier wird verstanden, dass „/api“ verwendet wird, um die Adresse im Ziel zu ersetzen. Wenn wir in den späteren Komponenten die Schnittstelle löschen, verwenden wir stattdessen direkt api Rufen Sie „http://192.168.149.90:8080/xxx/duty ?time=2017-07-07 14:57:22“ auf, schreiben Sie einfach „/api/xxx/duty?time=2017-“ 07-07 14:57:22' direkt

In dev.env.jsKonfigurieren Sie die EntwicklungsumgebungAdresse anfordern

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

Wenn Sie Axios für das Plug-in anfordern , die Konfiguration ist wie folgt

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

Ich glaube, Sie haben den Fall in diesem Artikel gelesen. Nachdem Sie die Methode gemeistert haben, achten Sie bitte auf andere verwandte Artikel auf der chinesischen PHP-Website, um weitere spannende Inhalte zu erhalten!

Empfohlene Lektüre:

Detaillierte Erläuterung der Schritte zur Implementierung der mehrseitigen Entwicklung und Verpackung von Vue

Detaillierte Erläuterung von die Verwendung des .sync-Modifikators in Vue

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Implementierung eines Proxys in Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!