1.整体架构

前端(Vue3 + Vite)        →           vite代理        →      后端服务(Spring Boot)

     ↓                                 ↓                             ↓    

localhost:3002 →    localhost:3002(不经过网关直接代理到6060)→  localhost:6060

2.前端架构与配置

2.1 整体流程

1. 前端调用: api.getObstacleList()
   ↓
2. axios组合路径: "/v1/" + "obstacle/list" = "/v1/obstacle/list"
   ↓
3. 浏览器发送: GET http://localhost:3002/v1/obstacle/list
   ↓
4. Vite代理拦截: /v1 → http://localhost:6060
   ↓
5. 实际转发: GET http://localhost:6060/v1/obstacle/list
   ↓
6. 后端处理并返回数据

2.2 涉及目录与模块

2.3 widget组件下的流程

2.3.1：例如:点击"刷新数据"触发refreshData方法

2.3.2:refreshData方法又会调用map.ts中的loadObstacles()

2.3.3 loadObstacles()通过common/api/modules中的obstacle.ts模块发送请求

2.3.4 common/api/http.ts下请求拦截器会拦截所有请求，在这里进行加token操作和vite转发配置

2.3.5 直接连接到后端6060端口，不经过网关(9999)

3.mars3D关键配置

3.1 环境变量

3.1.1 VITE_LOCAL_API = 0 (关键)

作用： 控制是否使用本地API模式

取值说明：

• 0 = 使用远程API（通过网络请求）
• 1 = 使用本地API（可能是mock数据或本地服务

3.1.2 VITE_API_URL=/v1/ (关键)

作用： 设置API请求的基础URL

不同环境配置：

• 开发环境: VITE_API_URL=/v1/（相对路径，通过Vite代理）
• 生产环境: VITE_API_URL=http://server.mars3d.cn/v1/（绝对路径，直接请求）

3.1.3 VITE_BASE_URL=/ (可忽略)

作用： 设置应用的基础路径（部署路径）

不同环境配置：

• 开发环境 (/.env.development): VITE_BASE_URL=/

• 生产环境 (/.env.production): VITE_BASE_URL=/project/vue/

3.2 ts文件配置

3.2.1 map.ts发请求的方法放在common/api/modules中

3.2.2 在common/api下的 index.ts中进行重新导出

3.2.2.1 这个index.ts文件的作用

统一入口，所有API函数都可以从一个地方导入

3.2.2.1.1使用重新导出后

// 在组件中使用 - 统一从一个入口导入
import { getObstacleList, getUserInfo, addObstacle } from "@mars/common/api"

// 使用
const obstacles = await getObstacleList()
const user = await getUserInfo()

3.2.2.1.2不使用重新导出

// 需要从多个文件分别导入
import { getObstacleList, addObstacle } from "@mars/common/api/modules/obstacle"
import { getUserInfo } from "@mars/common/api/modules/user"
import { getHistoryList } from "@mars/common/api/modules/

3.2.3 http.ts 配置 

3.2.3.1 修改转发路径

const instance = axios.create({
  baseURL: "/v1/", // 修改路径，匹配vite网关配置
  withCredentials: true,
  timeout: 1000 * 30
})

3.2.3.2 向拦截器中加入token（Axios配置）

// 请求拦截器
instance.interceptors.request.use(
  // 在发送请求之前的处理
  function (config) {
    const token = "你的token" // --localStorage.getItem("mars-user-token")
    if (token) {
      config.headers.Authorization = token
    }
    return config
  },
  // 对请求错误的处理
  function (error) {
    logWarn("API请求错误信息", error)
    return Promise.reject(error)
  }
)

3.2.4 修改vite设置

3.2.5 注意事项

3.2.5.1 对应的map.ts中要引入api

3.2.5.2 测试

3.2.5.3 modules中的ts文件的url和/v1/拼起来 要和后端控制器中的相同

 

 

4.测试gateway网关方法  (需要token)

4.1 直接访问网关

Invoke-WebRequest -Uri "http://localhost:9999/v1/你的控制器路径" -Headers @{"Authorization"="你的token"} -Method GET

4.2 访问网关配置

(Invoke-WebRequest -Uri "http://localhost:9999/actuator/gateway/routes" -Method GET).Content | ConvertFrom-Json | ConvertTo-Json -Depth 10

4.3 filter配置

filters:
  - RewritePath=/infoplat-info/(?<path>.*), /${path}

4.4 Gateway配置

# 新增：v1 API路由（用于障碍物等功能）
            - id: v1-api
              uri: lb://infoplat-info-biz
              predicates:
                - Path=/v1/**
              filters:
                - RewritePath=/infoplat-info/(?<path>.*), /${path}  # 修正路径