vite+vue3构建前端和多个后端服务器联调

vite+vue3构建前端多服务器后台调试

有时我们需要和多个后端和测试环境进行联调，常用的方法是，和谁联调就修改proxy代理接口，这样每次都要修改IP地址，开发效率较低。

该方法适合与多个后端本地和测试服务器联调，后端采用微服务，具体实现方法如下：

1. vite.config.ts

// vite.config.ts
import proxyTable from './proxyTable.js'

...

export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd());
  // 多端代理配置，去proxyTable.js里面配置个人、测试、准生产服务器
  // 默认main，若要使用其他端只需将URL里面的main替换成所需的服务器即可
  const newProxyTable = {}
  for (const key in proxyTable) {
    proxyTable[key].forEach((item) => {
      const row = {
        target: item.url,
        changeOrigin: true,
        rewrite: {}
      }
      row.rewrite = path => path.replace(new RegExp('' + `^/${key}${env.VITE_APP_BASE_API}`), '')
      newProxyTable[`/${key}${env.VITE_APP_BASE_API}/${item.base}`] = row
    })
  }
    // VITE_APP_BASE_API 为api前缀，可以设置也可以不设置，按需即可

    return {
            // 本地反向代理解决浏览器跨域限制
    	server: {
        host: '0.0.0.0',
        port: 3060,
        open: 'main', // 浏览器默认打开main准生产服务器页面调试
        proxy: newProxyTable
    	},
    ...
    }

2. proxyTable.js 在vite.config.ts平级新建文件

// proxyTable.js

export default proxyTable = {
  // 准生产服务器
  main: [
    {
      base: "auth",  // 用户
      url: "http://xx.xxx.xx.xx:8989/"
    },
    {
      base: "api",  // api微服务
      url: "http://xx.xxx.xx.xx:8989/"
    }
  ],
  // 测试服务器
  test: [
    {
      base: "auth",  // 用户
      url: "http://xx.xxx.xx.xx:8989/"
    },
    {
      base: "api",  // api微服务
      url: "http://xx.xxx.xx.xx:8989/"
    }
  ]
}

3.修改request.ts

// request.ts

let basePath = ''
// 默认连接地址，只在调试时有用
if (import.meta.env.VITE_NODE_ENV === 'development') {
  basePath = urlUtil.getEnvTypeByUrl() || 'main'
}
const service = axios.create({
  baseURL: basePath + import.meta.env.VITE_APP_BASE_API,
  timeout: 50000,
  headers: { 'Content-Type': 'application/json;charset=utf-8' }
});


// getEnvTypeByUrl方法如下
//  getEnvTypeByUrl() {
//    return location.pathname.length > 0 ? location.pathname.substring(1) : ''
//  }

4. 配置完毕

配置完启动服务，自动打开网址如下

http://localhost:3060/main#/login?redirect=/dashboard   // main为配置的准生产标识，

这是接口访问地址

http://localhost:3060/main/dev-api/admin/api/menu/routes?bookId=666
// main 为当前接口连接的是准生产服务器
// dev-api 为服务器接口前缀，看后端设置不设置，后端不设置前端为空即可
// admin 为admin微服务器

5. 切换联调对象

切换为测试服务器则只需要在地址栏将main替换成test即可，无需重新配置，适合快速联调，新增后端服务只需在proxyTable.js里面直接添加所需的地址

切换为test

http://localhost:3060/test#/login?redirect=/dashboard   // test为配置的测试标识，
// 接口地址转变如下
http://localhost:3060/test/dev-api/admin/api/menu/routes?bookId=666