vite 配置开发环境和测试环境，接口 API 自动切换

在Vite项目中配置开发环境和测试环境，并实现接口API的自动切换，可以通过配置环境变量和相应的代理设置来完成。以下是一个详细的步骤指南：

一、创建环境文件

在项目根目录下创建.env、.env.development和.env.test文件，用于存储不同环境下的配置信息。

1. .env：全局环境变量文件，当没有设置其他环境变量时，会加载这个文件里的内容。

VITE_BASE_API='/api'  # 默认API接口前缀
VITE_APP_NAME='My App'  # 应用名称

2. .env.development：开发环境下的配置文件。

NODE_ENV=development
VITE_BASE_API='/dev-api'  # 开发环境下的API接口前缀

3. .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);
});

五、运行和测试

1. 启动开发环境：运行npm run dev或yarn dev，Vite将加载.env.development文件，并使用开发环境下的API接口前缀。
2. 启动测试环境：运行npm run test或yarn test，Vite将加载.env.test文件，并使用测试环境下的API接口前缀。

通过以上步骤，你就可以在Vite项目中配置开发环境和测试环境，并实现接口API的自动切换了。

原文地址：https://blog.csdn.net/xuelian3015/article/details/142875239

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！