vue3+ts+vite+elementplus+Router+axios封装请求，配置开发环境，测试环境和生产环境

以下是使用Vue3、TypeScript、Vite、Element Plus、Router和Axios进行请求封装，并配置开发环境、测试环境和生产环境的步骤：

1. 首先，确保你已经安装了Node.js和npm。

2. 创建一个新的Vue项目，并选择Vue3作为模板：

npm create vite@latest my-project
cd my-project
npm install

3. 安装所需的依赖包：

npm install vue-router@next axios element-plus
npm install --save-dev @types/node

4. 在项目根目录下创建一个`.env`文件，用于配置不同环境的变量。在该文件中，可以定义不同环境下的API地址等配置信息。例如：

# 开发环境
VITE_API_BASE_URL=http://localhost:3000/api

# 测试环境
VITE_API_BASE_URL=http://test.example.com/api

# 生产环境
VITE_API_BASE_URL=http://api.example.com/api

5. 创建一个`src/api`文件夹，并在其中创建一个`request.ts`文件，用于封装请求。在该文件中，可以使用Axios发送请求，并根据不同环境的配置获取API地址。例如：

import axios from 'axios';

const instance = axios.create({
  baseURL: import.meta.env.VITE_API_BASE_URL,
  timeout: 5000,
});

export const get = (url: string, params?: any) => {
  return instance.get(url, { params });
};

export const post = (url: string, data?: any) => {
  return instance.post(url, data);
};

6. 在`src/router`文件夹中创建一个`index.ts`文件，用于配置路由。在该文件中，可以定义路由的路径和对应的组件。例如：

import { createRouter, createWebHistory } from 'vue-router';
import Home from '../views/Home.vue';

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  // 其他路由配置...
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

7. 在`src/main.ts`文件中，引入所需的依赖，并配置Vue应用。例如：

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

createApp(App)
  .use(router)
  .mount('#app');

8. 在`src/App.vue`文件中，使用Element Plus组件和路由进行页面渲染。例如：

<template>
  <div>
    <router-view></router-view>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'App',
});
</script>

<style>
/* 样式 */
</style>

9. 运行开发环境：

npm run dev

10. 在浏览器中访问`http://localhost:3000`，即可看到Vue应用的页面。

11. 根据需要，在`src/views`文件夹中创建其他页面组件，并在路由配置中添加对应的路径和组件。

12. 根据需要，在`src/components`文件夹中创建其他组件，并在页面组件中引入和使用。