vite（vue3+ts）配置开发、测试、生产环境

在Vite项目中，你可以通过不同的环境变量文件来区分开发、测试、生产环境的配置。

1. 在项目根目录下创建三个文件：.env, .env.test, .env.production。

.env 文件用于开发环境：

NODE_ENV='development'
VITE_API_URL='http://localhost:3000'

.env.test 文件用于测试环境：

NODE_ENV='test'
VITE_API_URL='http://test-api.example.com'

.env.production 文件用于生产环境：

NODE_ENV='production'
VITE_API_URL='http://api.example.com'

2. 在 vite.config.ts 中通过 import.meta.env 读取环境变量：

// vite.config.ts
import { defineConfig } from 'vite';
 
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd());
  return {
    // 其他配置...
    server: {
      // 根据环境变量设置服务器配置
      port: env.VITE_PORT || 3000,
    },
    // 其他环境特定的配置...
  };
});

3. 在 tsconfig.json 中设置条件类型，针对不同的环境编译不同的类型声明：

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    },
    // 其他配置...
    "types": [
      "vite/client",
      {
        "types": ["node/http", "node"],
        "env": "development"
      },
      {
        "types": ["jest"],
        "env": "test"
      }
    ]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

4. 在 package.json 中定义脚本，指定不同的模式：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "test": "vite test --mode test"
  }
}

使用以上配置，你可以根据不同的环境运行不同的命令，Vite 会自动加载对应的环境变量文件。