vue3+vite+axios 配置连接后端调用接口的实现方法

在vite.config.ts文件中添加以下配置

export default defineConfig({
  plugins: [vue()],
  optimizeDeps: {
    include: ['axios'],
  },
  build: {
    target: 'modules',
    outDir: 'dist',
    assetsDir: 'assets',
    minify: 'terser' // 混淆器
  },
  server: {
    cors: true,
    open: true,
    proxy: {
      '/api': {
        target: 'http://xxx.xxx.xxx',   //代理接口
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

在本地项目中新建一个文件夹api文件夹中编写以下文件

1.配置axios（axios.js）

import axios from "axios"

const instance = axios.create({
  baseURL: "/api",
  timeout: 5000,
});

// 添加请求拦截器
instance.interceptors.request.use(
  (config) => {
    // 在发送请求之前做些什么
    config.headers["Content-type"] = "application