vite线上和线下环境的配置

在Vite中，你可以通过不同的环境变量来区分线上和线下环境的配置。以下是一个基于Vite的项目中如何配置不同环境的示例：

1. 在项目根目录下创建 .env 文件，用于所有的环境变量。
2. 创建 .env.production 文件，用于生产环境的特定变量覆盖。
3. 在 vite.config.js 中使用 import.meta.env 来访问环境变量。

.env 文件（所有环境共享）:

# 所有环境共有的变量
VITE_API_URL=https://api.example.com/

.env.production 文件（生产环境）:

# 只在生产环境中覆盖的变量
VITE_API_URL=https://production-api.example.com/

vite.config.js 文件中的配置:

import { defineConfig } from 'vite';
 
export default defineConfig(({ mode }) => {
  // 根据 mode 判断是否是生产环境
  const isProduction = mode === 'production';
 
  return {
    // 其他配置...
    server: {
      // 服务器配置...
    },
    build: {
      // 构建配置...
    },
    // 环境变量配置
    define: {
      'process.env': {
        // 将环境变量注入到应用中
        VITE_API_URL: isProduction ? JSON.stringify(process.env.VITE_API_URL_PROD)
                                  : JSON.stringify(process.env.VITE_API_URL)
      }
    }
  };
});

在开发过程中，你可以通过启动 Vite 服务器时指定的 mode 参数来区分不同的环境。例如，使用 npm 脚本来分别启动开发和生产模式的服务器：

// package.json
{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  }
}

运行 npm run dev 将以默认的开发环境模式启动，而 npm run build 和 npm run preview 将会以生产环境模式运行。Vite 会自动加载项目根目录下的 .env 和与 mode 对应的 .env.production 文件中的变量。