vben-admin 配置代理转发

作者：麦兜

2024-02-18
浙江
本文字数：1346 字
阅读完需：约 4 分钟

由于后端的 api, 或者 websocket 需要提供服务. 所以没法直接暴露内网的地址提供外部访问. 下面是 vue3, vben-admin 上面的配置.

vite.config.ts 的配置

下面提供了 basic-api, ws-api 的转发.

注意那个正则表达式是没有单引号和转义字符的

开启了 ws: true,

第 2 个参数, 代表内网的实际访问路径

import { defineApplicationConfig } from '@vben/vite-config';
export default defineApplicationConfig({  overrides: {    optimizeDeps: {      include: [        'echarts/core',        'echarts/charts',        'echarts/components',        'echarts/renderers',        'qrcode',        '@iconify/iconify',        'ant-design-vue/es/locale/zh_CN',        'ant-design-vue/es/locale/en_US',      ],    },    server: {      proxy: {        '/basic-api': {          target: 'http://192.168.32.2:8001', // 假设这是你的内网API服务器地址          changeOrigin: true,          ws: true,          rewrite: (path) => path.replace(/^\/basic-api/, '/api'), // 假设你的内网API路径以/api开始        },        '/ws-api': {          target: 'ws://192.168.8.96:1880', // WebSocket服务的内网地址          ws: true, // 启用WebSocket代理          changeOrigin: true, // 为WebSocket连接改变origin          rewrite: (path) => path.replace(/^\/ws-api/, '/ws/ai'),         },                '/api': {          target: 'http://localhost:3000', // 假设这是你的本地开发服务器地址          changeOrigin: true,          ws: true,          rewrite: (path) => path.replace(/^\/api/, ''), // 删除/api前缀        },        '/upload': {          target: 'http://localhost:3300', // 假设这是你的上传服务地址          changeOrigin: true,          ws: true,          rewrite: (path) => path.replace(/^\/upload/, ''), // 删除/upload前缀        },      },      warmup: {        clientFiles: ['./index.html', './src/{views,components}/*'],      },    },  },});

复制代码

在.env 或者开发环境做如下的配置:

注意 http 的地址是 VITE_GLOB_API_URL=/basic-api

ws 的地址是 VITE_GLOB_WEBSOCKET_URL=ws://xxxxx.cn:55173/ws-api

2 个提供的方式略微差别, 因为 ws 如果类似 http 地址的写法, 我这边是过不去的. 这个是个坑.

如果按照如下的方式来写就没有问题.

# Whether to open mockVITE_USE_MOCK = true
# public pathVITE_PUBLIC_PATH = /
# VITE_PROXY = [["/basic-api","http://192.168.32.2:8001/api/method"],["/UploadFiles","http:/192.168.32.2:8001/api/method/UploadFiles"]]
# Basic interface address SPAVITE_GLOB_API_URL=/basic-api# VITE_GLOB_API_URL=http://192.168.32.2:8001/api/method
# Client TokenVITE_GLOB_CLIENT_TOKEN=YzFkZxxxx
# Client Token# VITE_GLOB_WEBSOCKET_URL=ws://192.168.8.96:1880/ws/aiVITE_GLOB_WEBSOCKET_URL=ws://xxxxx.cn:55173/ws-api
# File upload address， optionalVITE_GLOB_UPLOAD_URL=/upload
# Interface prefixVITE_GLOB_API_URL_PREFIX=