Proyecto Vue: obtenga la dirección del servidor proxy de destino en un archivo del proyecto

En el proyecto, cuando queremos que la primera mitad de una ruta (servidor proxy) sea variable y la segunda mitad (ruta del archivo) sea fija, podemos usar el método de empalme de cadenas y establecer una asignación de variable al frente para obtener el servidor proxy La dirección de destino, de modo que no sea necesario cambiar la ruta después de cambiar la IP del proxy en el futuro.

Ejemplos de escenarios de uso:

Cuando el front-end necesita hacer clic en el botón para descargar, ya sea que use una etiqueta o el método window.open, debe escribir la ruta completa de descarga del archivo (como: 192.168.1.1:8000/files/down_excle), pero cuando cambiamos el back-end Después de cargar la red o el proyecto en la nube, la dirección IP aquí definitivamente cambiará.Si la dirección está escrita con fuerza, la función de descarga fallará.

Camino equivocado:

download () {
     const a = document.createElement('a')
      a.href = 'http://192.168.1.1:8000/file/download_excel'
      a.download = 'filename.xsl' 
      a.click()
}

Método de escritura de ruta de costura:

download () {
    var path='/Mergereport/download_excel';
    window.open(API_CONFIG.devServer.proxy['/has'].target+path,"target")
    }

Cómo obtener la dirección del proxy:

//引入Vue.config.js文件
import  API_CONFIG from "../../../vue.config.js"

//在使用的地方获取代理地址
var ippath=API_CONFIG.devServer.proxy['/has'].target

Finalmente, el empalme de ruta se puede hacer