react vite如何配置开发生产环境

在React和Vite项目中配置开发和生产环境通常涉及设置构建脚本、打包配置以及环境变量。以下是简单的步骤：

1. **创建`vite.config.js`**: Vite默认会寻找这个文件作为配置起点。在这个文件中，你可以区分开发(`dev`)和生产(`build`)环境。

// vite.config.js
export default defineConfig({
  // 开发模式配置
  build: {
    target: 'esnext', // 目标环境
    outDir: 'dist', // 输出目录
    rollupOptions: {
      input: 'src/main.js', // 入口文件
      output: {
        dir: './dist',
        format: 'iife', // 用于浏览器环境的立即执行函数
      },
    },
  },
  dev: {
    server: { // 开启本地服务器
      host: 'localhost', port: 3000,
    },
    base: './dist', // 设置静态资源的根目录
    proxy: {}, // 如果需要代理其他服务
  },
});

// 分配环境变量
if (process.env.NODE_ENV === 'production') {
  // 生产环境配置，比如压缩代码等
  optimizeDeps: {
    skipDefaultDevServer: true,
    terserOptions: {},
  }
}

2. **环境切换**:
- 使用`npm run dev`启动开发环境
- 使用`npm run build`构建生产环境，生成的文件会被放到指定的`dist`目录下

3. **环境变量**:
- 在`package.json`的scripts部分，可以添加命令行选项来自动设置环境变量，如`NODE_ENV=production npm run build`。