基于el-vue-admin的后端微服务交互部分配置

此情况是后端分模块开发服务，针对不同的端口，前端一个项目需要做域名不同处理，这里第一种办法用了前端反向代理，因为vue是把后端路由代理成前端路由

前端代理路由：https:// pc.t.xxx.com/server/mxxxx/config
后端真实路由：https://server.t.xxx.com/mxxxx/config

vue.config.js

 devServer: {
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    proxy: {
      '/server_employee': {
        target: 'http://21324324:9000',
        changeOrigin: true, //允许跨域
        pathRewrite: {
          '^/server_employee': '/',
        },
      },
      '/server_coupon': {
        target: 'http://23423432:9010',
        changeOrigin: true, //允许跨域
        pathRewrite: {
          '^/server_coupon': '/',
        },
      }
    }

api下面新增一个config.js:

export default {
    employee: '/server_employee', //员工接口
    coupon: '/server_coupon', //卡券接口
};

api下新增coupon.js

import request from '@/utils/request'
import config from './config'

/**
 * 卡券列表
 * */
export function couponsList (data) {
  return request({
    url: config.coupon + '/ddd/coupons',
    method: 'GET',
    params: data
  })
}
/**
* 组织结构-组织结构树形数据
* */
export function orgTree() {
  return request({
    url: config.employee + '/sds/ntree',
    method: 'GET',
  })
}

utils下的request.js:

// 创建axios实例
const service = axios.create({
 代理注释掉
  // baseURL: process.env.VUE_APP_BASE_API,// url=基本url+请求url 
  上传文件不需要这个
  // headers: {
  //   "content-type": "application/json",
 //  }
})

调用的vue文件：

import {couponsList, orgTree} from "@/api/cuopon";
created() {
    if(this.config.editData && this.config.editData.id)
    couponsList(this.config.editData.id).then(res => {
      this.form = res
      this.form.id = this.config.editData.id
    })
  },

在此基础上写上传文件的header测试：
在api下新增file.js:

import request from '@/utils/request'
import config from "@/api/config"

/**
 * 文件上传 
 * @param data {Object} formData对象 "file"
 * @returns {*}
 */
export function uploadCoverImg(data) {
  return request({
    url: config.coupon + '/upload/cover',
    method: 'post',
    data: data,
    headers: {
      'Content-Type': 'multipart/form-data',
    },
    transformRequest: [
      function() {
        return data
      },
    ]
  })
}

vue模板：

<el-col :span="20">
          <el-form-item label="转发图片：" prop="cover">
            <el-upload action="#" list-type="picture-card" ref="uploadForm" :before-upload="beforeUpload" :limit="1" :http-request="uploadCoverImgFn" :disabled="config.isLook">
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{file}">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="">
                <span class="el-upload-list__item-actions">
                  <span v-if="!disabledImg" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <i class="el-icon-delete"></i>
                  </span>
                </span>
              </div>
              <div slot="tip" class="el-upload__tip">最大支持2M，方形，支持jpg/jpeg/png格式</div>
            </el-upload>
          </el-form-item>
        </el-col>

script:

import {uploadCoverImg} from "@/api/modules/file";

uploadCoverImgFn(val) {
      const formData = new FormData(); // 开始上传文件 新建一个formData
      formData.append("file", val.file);// 通过append向form对象添加数据
      uploadCoverImg(formData)
        .then((res) => {
          if (res) {
            this.form.cover = res;
            this.$message({ message: '上传成功', type: "success" });
          } else {
            this.clearFlies();
          }
        })
    },
// 移除上传图片列表
    clearFlies() {
      this.$refs.uploadForm.clearFiles();
    },

第二种办法配置多个url：
.env.dev文件等

ENV = 'development'
# 卡劵 api
VUE_APP_COUPON_API = 'http://2222:9010'
# 员工 api
VUE_APP_EMPLOYEE_API = 'http://33333:9000'
VUE_APP_TILTLE = "屈臣氏企微管理系统"

vue.config.js:

  devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
  },

api下面创建的config.js:

export default {
    employee: process.env.VUE_APP_EMPLOYEE_API, //员工接口
    coupon: process.env.VUE_APP_COUPON_API, //卡券接口
};

request.js

// 创建axios实例
const service = axios.create({
  // baseURL: process.env.VUE_APP_COUPON_API,// url=基本url+请求url
  // headers: {
  //   "content-type": "application/json",
  // }
})