vue3 vite build如何可以动态修改axios地址，避免重复打包，适配不同的后端地址

Vue3中使用Vite构建项目，为了在部署时能动态更改axios的请求地址而避免每次build都打包相同的代码，你可以采用以下策略：

1. **环境变量**（`.env`文件或`.env.local`）：
创建一个环境变量文件，如`.env.production`，其中包含API地址：

   API_URL=https://your-backend-url.com

在你的Vite配置文件`vite.config.js`中，使用`import.meta.env`来读取这个环境变量：

   import { defineConfig } from 'vite';
   export default defineConfig({
     base: './',
     build: {
       env: {
         apiUrl: process.env.API_URL,
       },
     },
   });

然后在代码里使用`process.env.apiUrl`替换硬编码的URL。

2. **axios插件**：
可以使用axios的` AxiosInstance.adapter`功能，创建一个自定义的adapter，该adapter会在发送请求前查找环境变量：

   import axios from 'axios';

   const apiAdapter = axios.create({
     baseURL: process.env.API_URL || 'default-url',
   });

   // 如果使用的是axios-plugin-vite：
   import { createAxiosInstance } from '@vue/cli-plugin-axios';
   const instance = createAxiosInstance({ baseurl: process.env.API_URL });

3. **条件编译**（如Rollup或TypeScript）：
对于只在生产环境中使用的URL，使用条件编译，例如在TypeScript中，可以创建一个类型保护符来标记只在构建时可用的值：

   let apiUrl: string;
   if (process.env.NODE_ENV === 'production') {
     apiUrl = process.env.API_URL as string;
   } else {
     apiUrl = 'default-url'; // 开发环境默认值
   }

   export const axiosInstance = axios.create({ baseURL: apiUrl });

这样，随着环境的变化（如部署阶段），只需要改变对应的环境变量，不会因为代码变动而导致不必要的打包。