vue-cli 工程配置多个代理

前言

主要是两个地方添加配置，使用的方法可自行参考

添加配置

• .env.development 文件配置

# 开发环境配置
ENV = 'development'

# 开发环境
VUE_APP_BASE_API = '/dev-api'

# ftp代理/开发环境
VUE_APP_FTP_API = '/ftp-api'

• vue.config.js 文件配置代理示例，这里使用 .env.development 文件中相应的配置名称，为了明显，这里只截取 devServer 配置（ip 地址都是假的）

module.exports = {
  // webpack-dev-server 相关配置
  devServer: {
    host: '0.0.0.0',
    port: port,
    proxy: {
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://102.129.211.325:8008`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      },
      [process.env.VUE_APP_FTP_API]: {
        target: `http://110.9.211.35:8081/prod-api`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_FTP_API]: ''
        }
      }
    },
    disableHostCheck: true
  }
}

使用

这里简单写一下使用方法

• 一般我们在 request.js 给 axios 设置默认的 baseURL

import axios from 'axios'

const service = axios.create({
  // axios中请求配置有baseURL选项，表示请求URL公共部分
  baseURL: process.env.VUE_APP_BASE_API,
  // 超时
  timeout: 600000
})

• 第二个代理的使用方式（因为用的地方不多，所以没有做什么封装，你可以根据所需自行扩展），这里是一个简单 api.js 示例

import request from '@/utils/request'

export function getData(params) {
  return request({
    baseURL: process.env.VUE_APP_FTP_API,
    url: '/system/job/list',
    method: 'get',
    params
  })
}