使用vite从头搭建一个vue3项目使用axios封装request.js文件，并使用proxy解决跨域问题

在Vue 3项目中，我们可以使用Axios库来发送HTTP请求。为了更好地管理这些请求，我们通常会创建一个封装了Axios的request.js文件。以下是如何创建这样的文件并使用Vite的代理功能解决跨域问题的示例代码：

1. 安装Axios：

npm install axios

2. 在项目中创建一个request.js文件：

// request.js
import axios from 'axios';
 
// 创建axios实例
const service = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 5000,
});
 
// 请求拦截器
service.interceptors.request.use(
  config => {
    // 可以在这里添加请求头等信息
    return config;
  },
  error => {
    // 请求错误处理
    console.log(error); // for debug
    Promise.reject(error);
  }
);
 
// 响应拦截器
service.interceptors.response.use(
  response => {
    // 对响应数据做处理，例如只返回data部分
    return response.data;
  },
  error => {
    // 响应错误处理
    console.log('err' + error); // for debug
    return Promise.reject(error);
  }
);
 
export default service;

3. 在vite.config.js中配置代理，解决开发环境下的跨域问题：

// vite.config.js
import { defineConfig } from 'vite';
 
export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://backend.server.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
});

在上述配置中，我们将所有以/api开头的请求代理到http://backend.server.com。这样，在开发环境中，我们就不会遇到跨域问题。

4. 在你的组件或者服务中使用request.js：

// 在组件中使用
import request from './request';
 
request.get('/someEndpoint').then(response => {
  console.log(response);
});

确保你已经在.env文件或者环境变量中设置了VITE_API_BASE_URL，例如：

VITE_API_BASE_URL=http://localhost:3000/api

以上就是如何在Vue 3项目中使用Vite创建一个封装了Axios的request.js文件，并使用Vite的代理功能解决开发环境下的跨域问题的示例。