如何使用Vite在本地以生产模式运行React应用？

要在本地以生产模式运行Vite搭建的React应用，核心分为构建生产包和托管静态文件两个步骤，以下是最实用的方案：

1. 构建生产优化后的应用包 #

首先执行Vite的生产构建命令，它会对代码进行压缩、Tree-Shaking、按需编译等生产级优化，最终产物输出到默认的dist目录：

• 使用npm：npm run build
• 使用yarn：yarn build
• 使用pnpm：pnpm build

构建完成后，dist目录里就是可以直接部署的静态资源文件。

2. 本地托管生产包 #

生产包是静态文件，不能直接通过双击HTML文件打开（会有跨域等问题），需要用静态服务器托管，推荐以下几种方式：

方式一：使用Vite自带的预览命令（最便捷） #

Vite内置了生产包预览服务器，无需额外安装工具，直接执行：

• 使用npm：npm run preview
• 使用yarn：yarn preview
• 使用pnpm：pnpm preview

默认会在http://localhost:4173启动服务器，自动加载dist目录的内容。如果需要自定义端口、自动打开浏览器等，可以在vite.config.js中配置：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  preview: {
    port: 3000, // 自定义端口
    open: true, // 启动后自动打开浏览器
    strictPort: true // 端口被占用时直接报错，不自动切换
  }
})

方式二：使用第三方静态服务器工具 #

如果偏好其他工具，比如serve或http-server：

• serve：先全局安装 npm install -g serve，然后执行 serve -s dist（-s表示单页应用模式，处理路由跳转）
• http-server：先全局安装 npm install -g http-server，然后执行 http-server dist -p 8080（-p指定端口）

注意事项 #

• 生产模式下没有热模块替换（HMR），修改代码后需要重新执行build命令，再重启预览服务器才能看到更新。
• 预览服务器仅用于本地验证生产包的效果，正式部署需要使用专业的静态资源服务器（如Nginx、Netlify等）。

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