vue3 vite.config.js 配置代理

vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver({importStyle: "sass"})],
  })
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  css: {
    preprocessorOptions: {
        scss: {
            additionalData: `@use "@/styles/element/index.scss" as *;`
        }
    }
},
server: {
  host: "127.0.0.1",
  cors: true,
  port: 8888,
  open: false, //自动打开
  proxy: {
    // 这里的ccc可乱写, 是拼接在url后面的地址 如果接口中没有统一的后缀可自定义
    // 如果有统一后缀, 如api, 直接写api即可, 也不用rewrite了
    "^/api": {
      target: "http://127.0.0.1:8000", // 真实接口地址, 后端给的基地址
      changeOrigin: true, // 允许跨域
      secure: false,  //关键参数，不懂的自己去查
      rewrite: (path) => path.replace(/^\/api/, '')
    },
  },
},
})

axios封装 http.js

import axios from 'axios';//这个需要你自己去npm install axios进行安装
const axiosInit = axios.create({//创建一个axios实例
    baseURL:"",//基准URL，就是相同的那一部分
    time: 3000,//响应时间
})
//下面的是请求拦截
axiosInit.interceptors.request.use((config) => {
    // 请求成功，一般都需要在这里做一些配置，下面的是我自己加上token到请求头
    //如果本地缓存中存在后端发过来的token，就在请求头中添加token上去
    if (localStorage.getItem('token')) {//括号里面的token是你自己定义的，因为我在我的登录界面的时候，就把后端返回的token存在localStroage，同时命名为token，所以这里你们可以自己根据自己的项目进行修改。如果
        config.headers['token'] = localStorage.getItem('token');//添加上去请求头
    }
    return config;//通过，返回响应的拦截
}, (error) => {//出现错误
    return Promise.reject(error);//返回错误信息
}
)

//下面的是响应拦截
axiosInit.interceptors.response.use(
    (response) => {//如果后端返回成功，就执行{}里面的内容
        console.log(response);//打印一下后端返回的数据
        if(response.status == 200){//判断一下后端返回的数据中的状态码是不是200，如果是200，就执行下面的return
            return Promise.resolve(response);
        }else{//如果返回的状态码不是200，就返回错误的信息，同时也可以在这里定义其他的状态码，然后加上去
            return Promise.reject(response);
        }
    },
    (error) =>{//后端没有成功返回数据，就执行下面的return
        return Promise.reject(error);
    }
)

export default axiosInit;//把上面创建的实例暴露出去，方便等等我们在httpHelper.js文件进行引入

apis文件夹配置post,get,put

import axiosInit from '../utils/http'; //把上面的暴露出来的axionInit进行引入，这样就可以使用我们上面定义的拦截器

//封装get函数
export const get = (url,data) => {
    return axiosInit({
        url:url,
        method:'GET',
        params:data,
    })
}

//封装put函数
export const put = (url,data) => {
    return axiosInit({
        url:url,
        method:'PUT',
        data:data,
    })
}

//封装post函数
export const post = (url,data) => {
    return axiosInit({
        url:url,
        method:'post',
        data:data,
    })
}

//括号里面的url和data都是调用的时候传进来的参数
//我上面只是封装了常用的get、post、put请求方法，其他你们也可以自行封装。我这里不是采用默认导出的，因为需要什么就进行按需导入。如果默认导出的话，还得导出名字.post，个人不是很喜欢这种使用方法。

调试用法

import {post,get,put} from './apis/testapi';

get('/api/home').then((rsp)=>{
    console.log(rsp);
})

此处总结vue3,vite.config.js 中的代理配置。百度了好久，零零散散的，花了老久试出来了。简单讲解代理流程，此处代理的配置是后端接口。关键点是前端通过axios发请求用的是前端自己的服务端口和域名，如果前缀存在/api 则直接将原来的url转换成配置好的代理路由，最后实现跨域，此处的卡点还有就是关于前缀是否取消的配置，此处我是直接将原来的/api直接替换所有，在调试接口的时候总发现哪儿不对，最后看到后端路由才知道没有api。一定要注意替换值的问题，替换完成了，确认下是不是你要的后端路由。

vue3 vite.config.js 配置代理

猜你喜欢