vue3+vite项目proxy代理使用小白篇

项目使用vue3+vite中使用proxy代理

接口地址是这些：http://123.111.1.222:8752/downhole/carHistoricalTrack/findAll

服务器地址：http://123.111.1.222
端口号：8752
根目录：/downhole
后台提供接口：carHistoricalTrack/findAll

1、在vite.config.js中配置服务及其端口
和resolve设置路径的同级如图：

代码如下：

server: {
      port: 80,
      host: true,
      open: true,
      proxy: {
        "/downhole": {
          target: 'http://123.111.1.222:8752/downhole',
          changeOrigin: true,//是否允许跨域
          rewrite: path => path.replace(/^\/downhole/, '')
        },
      }
    },

2、api中的car.js这样写：

import request from "@/utils/request.js"

// 回传数据查询
export function findAllEcho(params) {
    return request({
        url: "/downhole/carHistoricalTrack/findAll",
        method: "post",
        data: params
    })
}

3、utils/request.js这样写：

// 需要确定后台返回的是否0和1还是200或者500
//响应拦截器
service.interceptors.response.use(
    (response) => {
        const res = response.data
        if (res.code == 0 || res.code == 200) {
            loadingInstance?.close();
            return res.data;
        } else if (res.code == 1 || res.code == 500) {
            ElMessage.error(res.msg);
            return Promise.reject(new Error(res.msg))
        }

    },
    (err) => {
        console.log(123);
        loadingInstance?.close();
        ElMessage.error("请求失败");
        return Promise.reject(err);
    }
);

4、页面中这样用：

//引入接口
import { findAllEcho, exportCarHistory } from "@/api/car.js";
//获取数据的接口方法
let getFindAllEcho = () => {
  findAllEcho({
   // 参数
    startDate: starTime.value,
    endDate: endTime.value,
  }).then((res) => {
    // 返回值 res
    tableDataTour.value = res.list;
  });
};
getFindAllEcho(); // 调用获取数据的接口方法