So erstellen Sie mit Vue einen Proxy-Proxy

Dieses Mal zeige ich Ihnen, wie Sie Vue zum Erstellen eines Proxys verwenden. Was sind die Vorsichtsmaßnahmen für den Betrieb von Vue zum Erstellen eines Proxys? Das Folgende ist ein praktischer Fall.

Bei der Entwicklung des Vue-Frameworks 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': '/'     
    }
   }
  },

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

in dev.env Konfigurieren Sie die Anforderungsadresse der Entwicklungsumgebung in .js

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

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

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

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie auf der chinesischen PHP-Website. Andere verwandte Artikel!

Empfohlene Lektüre:

So verwenden Sie das modulare Verwaltungs- und Verpackungstool Webpack

security.js+RSA zur Verschlüsselung Funktion

Das obige ist der detaillierte Inhalt vonSo erstellen Sie mit Vue einen Proxy-Proxy. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!