打包

开发环境运行

在项目根目录下运行以下命令启动开发服务器：

pnpm dev

或者使用其他包管理器：

# Yarn
yarn dev

# NPM
npm run dev

开发服务器启动后，默认访问地址为 http://localhost:5173（具体端口以控制台输出为准）。

生产环境打包

方式一：标准打包

在项目根目录下运行以下命令进行生产环境打包：

pnpm build

或者使用其他包管理器：

# Yarn
yarn build

# NPM
npm run build

方式二：打包并生成分析报告

如果需要分析打包体积，可以运行：

pnpm report

该命令会生成打包分析报告，帮助优化打包体积。

打包配置

打包使用 config/vite.config.prod.ts 配置文件，主要配置包括：

• 代码压缩：自动启用 Gzip/Brotli 压缩
• 图片优化：自动压缩图片资源
• 代码分割：自动进行代码分割优化
• Tree Shaking：移除未使用的代码

打包结果

打包完成后，会在项目根目录下生成 dist 文件夹，该文件夹包含了所有的静态资源文件：

dist/
├── assets/          # JS、CSS 等资源文件
├── index.html       # 入口 HTML 文件
└── ...              # 其他静态资源

预览打包结果

打包完成后，可以使用以下命令预览打包结果：

pnpm preview

该命令会启动一个本地服务器，用于预览生产环境构建结果。

常见问题

Q: 打包时出现内存不足错误？

A: 可以增加 Node.js 内存限制：

NODE_OPTIONS=--max_old_space_size=4096 pnpm build

Q: 打包后的文件很大？

A: 检查是否启用了代码压缩和图片优化，可以使用 pnpm report 分析打包体积。

Q: 打包后页面空白？

A: 检查：

• 路由配置是否正确（History 模式需要服务器配置）
• 静态资源路径是否正确
• 浏览器控制台是否有错误信息

Q: 如何配置不同的环境变量？

A: 在项目根目录创建 .env.production 文件，配置生产环境变量。