前端同时联调多个后端

前言

最近公司项目有时需要和多个后端同时对接（😔小公司一对N），于是对公司项目基础配置文件做了些修改，最终达到能对于多个后端同时启动多个前端服务，而不是每次都需要和A同学对接完，代理地址再换成B同学然后重新启动项目

个人经验0.5年，菜鸡前端一枚，第一次写文章，只是对个人工作简要记录😂!!!

公司项目有vue脚手架搭建的也有vite搭建的，下面让我们分两种方式来修改配置文件

vue-cli方式【webpack】

1. 个人习惯把proxy单独抽离出来放到.env.development

# 启动端口号

VUE_PORT = 8000


# 代理配置

# A同学

VUE_PROXY_A = [["/api","http://localhost:3001"]]


# B同学

VUE_PROXY_B = [["/api","http://localhost:3002"]]

2. 使用cross-env来加载不同的代理

npm i -D cross-env

重新编写下script

3. 读取环境变量

vueCli内部dotenv已经加载到process.env,我们再做一层包裹，之前配置的proxy，这种其实是字符串，需要处理

const { VUE_PROXY, VUE_PORT } = require("./constant.js")

// Read all environment variable configuration files to process.env
function wrapperEnv(envConf) {
const ret = {}
const SERVER_NAME = process.env.NODE_ENV_PROXY || VUE_PROXY

for (const envName of Object.keys(envConf)) {
if (!envName.startsWith('VUE')) {
continue

    }
let realName = envConf[envName].replace(/\\n/g, '\n')

    realName = realName === 'true' ? true : realName === 'false' ? false : realName

if (envName === VUE_PORT) {

      realName = Number(realName)

    }
if (envName === SERVER_NAME && realName) {
try {

        realName = JSON.parse(realName.replace(/'/g, '"'))

      } catch (error) {

        realName = ''

      }

    }

    ret[envName === SERVER_NAME ? VUE_PROXY : envName] = realName
if (typeof realName === 'string') {

      process.env[envName] = realName

    } else if (typeof realName === 'object') {

      process.env[envName] = JSON.stringify(realName)

    }

  }
return ret

}

module.exports = {

  wrapperEnv

}

这样我们就可以拿到所有的环境变量，并且proxy是数组，而不是字符串

4. 生成proxy

/**

 * Used to parse the .env.development proxy configuration

 */

const httpsRE = /^https:\/\//

/**

 * Generate proxy

 * @param list

 */
function createProxy(list = []) {
const ret = {}
for (const [prefix, target] of list) {
const isHttps = httpsRE.test(target)

// https://webpack.docschina.org/configuration/dev-server/#devserverproxy

    ret[prefix] = {
target: target,
changeOrigin: true,
ws: true,
pathRewrite: { [`^${prefix}`]: '' },
// https is require secure=false

      ...(isHttps ? { secure: false } : {}),

    }

  }
return ret

}

module.exports = {

  createProxy,

}

5. 修改vue.config.js

const { defineConfig } = require('@vue/cli-service')
const { wrapperEnv } = require('build/vue/util')
const { createProxy } = require('./build/vue/proxy')

const {
VUE_PORT,
VUE_PROXY

} = wrapperEnv(process.env)

module.exports = defineConfig({
transpileDependencies: true,
// webpack-dev-server 相关配置
devServer: {
host: '0.0.0.0',
port: VUE_PORT,
open: false,
overlay: {
logging: 'info',
errors: true,
warnings: true

    },
proxy: createProxy(VUE_PROXY),
disableHostCheck: true

  },

})

6. 使用mock模拟两个后端服务

A同学使用3001端口
B同学使用3002端口

7. 测试是否达到效果

同样我们前端也起两个8000和8001

接下来看下8000端口请求

再看下8001请求

vite

结语

以上只写了webpack不过vite和这也差不多！！！