在Vue3项目中，前端配置proxy代理解决跨域问题的方法与Vue2类似，主要是在开发环境下通过vite.config.js文件配置devServer的proxy选项。以下是使用Vite（Vue3默认构建工具）配置的例子：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
  server: {
    proxy: {
      '/api': { // 匹配的请求路径前缀
        target: 'http://your-backend-server-url.com', // 目标服务器地址
        changeOrigin: true, // 允许跨域
        rewrite: (path) => path.replace(/^\/api/, ''), // 如果后端接口不需要/api前缀，可以重写路径
        secure: false, // 如果目标服务器是HTTPS且证书不受信任，则设置为false以允许连接
        headers: { // 可选：添加自定义请求头
          'X-Custom-Header': 'value'
        }
      }
    },
    port: 3000 // 开发服务器端口，可自定义
  }
});

在这个例子中，所有以/api开头的请求会被转发到指定的目标服务器地址，从而实现跨域访问。这个配置仅在开发环境中生效。

注意：

1. Vite使用的是server.proxy而非devServer.proxy。
2. 在生产环境中，通常需要通过后端服务或Nginx等反向代理服务器来处理跨域问题。

那么在封装请求时，您应该按照这个代理规则来构建API请求的URL路径： 

const env = import.meta.env;
const service = axios.create({
  baseURL: env.MODE === 'development' ? '/api' : 'http://your-backend-server.com', // 根据环境选择基础URL
});

这样，在开发环境中，所有以/api开头的请求会被自动代理到目标服务器地址，而在生产环境中，则直接向后端服务器发送请求。