在Vite项目中配置开发环境和测试环境，并实现接口API的自动切换，可以通过配置环境变量和相应的代理设置来完成。以下是一个详细的步骤指南：
一、创建环境文件
在项目根目录下创建.env、.env.development和.env.test文件，用于存储不同环境下的配置信息。
- .env：全局环境变量文件，当没有设置其他环境变量时，会加载这个文件里的内容。
VITE_BASE_API='/api' # 默认API接口前缀
VITE_APP_NAME='My App' # 应用名称
- .env.development：开发环境下的配置文件。
NODE_ENV=development
VITE_BASE_API='/dev-api' # 开发环境下的API接口前缀
- .env.test：测试环境下的配置文件。
NODE_ENV=test
VITE_BASE_API='/test-api' # 测试环境下的API接口前缀
二、配置Vite
在vite.config.ts或vite.config.js文件中，根据环境变量动态配置代理和其他相关设置。
import { defineConfig, loadEnv } from 'vite';
import path from 'path';export default ({ mode }: { mode: string }) => {const viteEnv = loadEnv(mode, process.cwd());console.log(viteEnv, '当前环境');return defineConfig({server: {host: '127.0.0.1',port: 3000,open: false,proxy: {[viteEnv.VITE_BASE_API]: {target: viteEnv.VITE_API_URL || 'https://example.com', // 可以在环境文件中配置具体的API URL，也可以在这里默认一个changeOrigin: true,rewrite: (path) => path.replace(/^\/dev-api|\/test-api/, ''), // 根据实际API前缀进行重写},},},// 其他配置...});
};
注意：上面的rewrite函数需要根据实际的API前缀进行调整。如果API前缀是固定的，可以直接写死；如果前缀是动态的（如根据环境变量变化），则需要使用类似上面的方式进行重写。
三、配置package.json
在package.json文件的scripts部分，添加用于启动开发环境和测试环境的命令。
"scripts": {"dev": "vite --mode development","test": "vite --mode test","build": "vite build --mode production", // 生产环境构建命令（虽然这里没提到生产环境，但通常也需要一个构建命令）// 其他脚本...
}
四、使用环境变量
在项目的代码中，可以通过import.meta.env来访问环境变量。
// 例如，在main.ts或main.js中
console.log(import.meta.env.VITE_BASE_API); // 输出当前环境的API接口前缀// 发起API请求时，使用VITE_BASE_API作为前缀
axios.get(`${import.meta.env.VITE_BASE_API}/some-endpoint`).then(response => {console.log(response.data);
});
五、运行和测试
- 启动开发环境：运行
npm run dev或yarn dev，Vite将加载.env.development文件，并使用开发环境下的API接口前缀。 - 启动测试环境：运行
npm run test或yarn test，Vite将加载.env.test文件，并使用测试环境下的API接口前缀。
通过以上步骤，你就可以在Vite项目中配置开发环境和测试环境，并实现接口API的自动切换了。
