前端vite项目分环境打包

在前端项目中使用 Vite 进行分环境打包是一种常见的做法，旨在根据不同的环境变量加载不同的配置，比如开发环境（development）、测试环境（staging）和生产环境（production）。Vite 项目可以通过配置文件 `.env` 和其变体（如 `.env.production`）来设置环境变量，然后根据这些变量来决定如何打包。

以下是 Vite 项目分环境打包的一般步骤：

1. 创建环境变量文件：在项目根目录下创建不同环境的 `.env` 文件，例如 `.env.development`、`.env.production` 等，分别设置不同环境下的变量值。

// .env.development
VITE_APP_ENV=development

// .env.production
VITE_APP_ENV=production

2. 在 Vite 配置文件中使用环境变量：在 `vite.config.js` 文件中可以通过 `import.meta.env` 对象访问这些环境变量，然后根据环境变量的不同值来调整配置。

// vite.config.js
import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig(({ command, mode }) => {
  const env = process.env.VITE_APP_ENV;
  
  // 根据环境变量设置不同的配置项
  return {
    base: env === 'production' ? '/my-app/' : '/',
    build: {
      // 其他构建配置...
    },
    // 其他配置...
  };
});

3. 使用环境变量：在项目代码中，可以通过 `import.meta.env.VITE_APP_ENV` 来获取环境变量，并根据不同的环境执行不同的逻辑。

// main.js 或其他入口文件
if(import.meta.env.VITE_APP_ENV === 'production'){
  console.log('This is production build');
} else {
  console.log('This is development build');
}

4. 分环境构建：在命令行中使用 Vite 提供的命令来根据不同的环境变量进行构建。

# 开发环境构建
npm run build:dev

# 生产环境构建
npm run build:prod