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

嫣嫣细语

于 2024-07-04 15:37:08 发布

阅读量801

点赞数 2

CC 4.0 BY-SA版权

分类专栏： vue.js javascript 前端文章标签：前端 javascript vue.js

本文链接：https://blog.csdn.net/aaa123aaasqw/article/details/140181101

在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"] = "applicati