„Umgebungsvariablen“ Domänenübergreifende Entwicklungsumgebung

Unterscheiden Sie dynamisch zwischen Entwicklungs- und Produktionsumgebungen

Sie können Variablen in .env.developmentund definieren .env.production, und die Variablen übernehmen automatisch den Wert der aktuellen Umgebung

Es wird eine Variable definiert VUE_APP_BASE_API，, die als Axios-Anfrage verwendet werden kannbaseURL

/.env.development

# base api  让当前请求被代理
VUE_APP_BASE_API = '/api'

Legen Sie die Basis-URL im Interceptor fest

„Umgebungsvariablen“: process.env.VUE_APP_****

Die URL an dieser Stelle ist die URL des Proxys

Entwicklung => Entwicklungsumgebung

Produktion => Produktionsumgebung

Wenn wir npm run dev zum Entwickeln und Debuggen ausführen , wird zu diesem Zeitpunkt .env.developmentder Inhalt der Ausführungsdatei geladen

Wenn wir npm run build:prod ausführen, um die Produktionsumgebung zu packen, wird .env.productionder Inhalt der Ausführungsdatei geladen

const service = axios.create({
  baseURL: process.env.VUE_APP_BASE_API,
})

Probleme mit domänenübergreifenden Entwicklungsumgebungen

In der domänenübergreifenden Entwicklungsumgebung vue-cli脚手架环境, wenn wir den Dienst entwickeln und starten, treten beim Zugriff auf die Schnittstelle domänenübergreifende Probleme auf. Vue-cli ist für uns lokal und kann uns 开启了一个服务über diesen Dienst 代理请求bei der Lösung domänenübergreifender Probleme helfen. Auf devServer zugreifen Lassen Sie devServer auf den Server zugreifen

Die Konfigurationsdatei von vue-cli istvue.config.js 配置参考

module.exports = {
  devServer: {
   // 代理配置
    proxy: {
        // 这里的api 表示如果我们的请求地址有/api的时候,就出触发代理机制
        // localhost:8888/api/abc  => 代理给另一个服务器
        // 本地的前端  =》 本地的后端  =》 代理我们向另一个服务器发请求 （行得通）
        // 本地的前端  =》 另外一个服务器发请求 （跨域 行不通）
        '/api': {
        target: 'http://ihrm.itheima.net', // 我们要代理的地址
        changeOrigin: true, // 是否跨域 需要设置此值为true 才可以让本地服务代理我们发出请求
        }
    },
  }
}

vue.config.jsDamit die Änderungen wirksam werden, muss der Dienst neu gestartet werden