Vue配置API代理

vite.config.js配置如下

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
export default defineConfig({
  plugins: [ 
    vue(), // 添加 Vue 插件配置
  ],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src'),
    },
  },
    server: {
      port: 2888,
      proxy: {
        '/api': {
          target: 'http://192.168.3.14:13000',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },

})

axios封装

import axios from 'axios';

// 创建axios实例
const instance = axios.create({
  timeout: 10000, // 设置超时时间为10秒
  headers: {
    'Content-Type': 'application/json', // 设置Content-Type
  },
  // 删除baseURL配置
});

// 添加请求拦截器
instance.interceptors.request.use(
  config => {
    // 在请求发送之前做些什么
    // 如果需要在请求发送前进行额外的处理，可以在这里添加
    return config;
  },
  error => {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据做处理
    return response.data;
  },
  error => {
    // 对响应错误做处理
    return Promise.reject(error);
  }
);

export default instance;

API引用

import request from '@/axios';
export const $_deliveryInfo = (params) => {
    return request({
      url: '/api/logpm-distribution/a/abc', // 注意这里的 URL带上API 更改
      method: 'get',
      params
    })
}

启动项目如果只有本地地址需要再package.json中配置

  "scripts": {
    "dev": "vite --host",
  },