如何正确在生产环境运行React Vite项目？含配置与日志疑问

一、当前运行状态是否正常？ #

完全不正常。你现在在生产环境跑的是开发服务器——不管是Vite的vite命令还是Create React App（CRA）的react-scripts start，都是专门给本地开发用的命令。这类服务器会开启热重载、输出未压缩的代码，性能远达不到生产标准，还存在安全风险，绝对不能用于生产环境。

二、Vite+React生产环境正确部署流程 #

1. 生成生产构建包 #

先确认项目根目录的package.json里包含构建命令，没有的话补充上：

{
  "scripts": {
    "dev": "vite",          // 仅本地开发使用
    "build": "vite build",  // 生成生产优化后的代码包
    "preview": "vite preview" // 本地预览生产包（仅测试用）
  }
}

执行构建命令生成生产文件：

npm run build

执行完成后，项目根目录会多出一个dist文件夹，里面是压缩、优化后的生产环境代码。

2. 托管静态文件 #

生产环境不能用Vite的开发服务器，必须用专业的静态文件服务器托管dist文件夹，常用方案有两种：

• Nginx：生产环境首选，性能稳定、配置灵活，只需把Nginx的根目录指向dist文件夹即可。
• serve：轻量静态服务器，适合快速部署测试，安装后执行serve -s dist就能启动服务。

3. Vite配置调整（可选） #

你的现有配置是针对开发环境的，生产环境可以补充构建优化配置，比如：

export default defineConfig({
  esbuild: {
    loader: "jsx",
  },
  optimizeDeps: {
    esbuildOptions: {
      loader: {
        ".js": "jsx",
      },
    },
  },
  // 生产构建专属配置
  build: {
    outDir: "dist", // 默认输出目录，可按需修改
    minify: "terser", // 用terser压缩代码，比默认esbuild压缩比更高
    sourcemap: false, // 生产环境建议关闭sourcemap，减少文件体积
  },
  // server配置仅在开发模式生效，无需修改
  server: {
    port: 3000,
  }
});

三、Create React App生产环境正确部署流程 #

1. 生成生产构建包 #

CRA默认已经包含构建命令，直接执行：

npm run build

执行完成后会生成build文件夹，里面是生产环境代码。

2. 托管静态文件 #

和Vite一样，用Nginx或serve等静态服务器托管build文件夹，比如执行serve -s build即可启动服务。

核心注意事项 #

• 生产环境绝对不能运行vite或react-scripts start命令，这两个都是开发模式，性能、安全性都不达标。
• 构建后的静态文件必须用专业静态服务器托管，不能直接用开发服务器对外提供服务。

内容的提问来源于stack exchange，提问作者Dwix