React@18+Vite项目配置env文件

React+Vite配置接口URL的env文件要符合以下规则：

1. 文件位置

确保 .env 文件放在项目根目录：

复制代码

your-vite-project/
├── node_modules/
├── public/
├── src/
├── .env           # ✅ 正确位置
├── .env.development
├── .env.production
├── index.html
├── package.json
├── vite.config.js
└── README.md

2. 环境文件类型

Vite 支持多个环境文件：（文件名必须是这样的）

复制代码

.env                # 所有环境通用
.env.local          # 本地覆盖（不提交到git）
.env.development    # 开发环境 (如果文件名是 .env.develop 就不行)
.env.production     # 生产环境
.env.test          # 测试环境

3. Vite 环境变量命名规则

Vite 使用 VITE_ 作为自定义环境变量的前缀：

复制代码

# .env 文件
VITE_API_URL=http://localhost:3000/api
VITE_API_TIMEOUT=5000

4. 正确的访问方式

Vite 通过 import.meta.env 访问环境变量：

复制代码

// 在组件中
console.log(import.meta.env.VITE_API_URL); // http://localhost:3000/api
console.log(import.meta.env.VITE_API_TIMEOUT); // 5000

// 使用变量
const apiUrl = import.meta.env.VITE_API_URL;
fetch(`${apiUrl}/users`)

5. 在 Vite 配置中使用

复制代码

// vite.config.js
import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig(({ command, mode }) => {
  // 加载环境变量
  const env = loadEnv(mode, process.cwd(), '')
  
  console.log('当前模式:', mode)
  console.log('API URL:', env.VITE_API_URL)
  
  return {
    plugins: [react()],
    server: {
      port: env.VITE_PORT || 3000,
      proxy: {
        '/api': {
          target: env.VITE_API_URL,
          changeOrigin: true
        }
      }
    },
    define: {
      // 可以在这里定义全局常量
      __APP_VERSION__: JSON.stringify(env.npm_package_version)
    }
  }
})

6. 不同环境的配置文件

复制代码

# .env.development
VITE_API_URL=http://localhost:3000/api
VITE_ENABLE_DEBUG=true

# .env.production
VITE_API_URL=https://api.example.com
VITE_ENABLE_DEBUG=false

# .env.test
VITE_API_URL=http://test-api.example.com
VITE_ENABLE_DEBUG=true

注：修改了配置文件后要 重启项目