打包

开发环境运行

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

pnpm dev

yarn dev

npm run dev

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

生产环境打包

方式一：标准打包

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

pnpm build

yarn build

npm run build

打包配置

打包使用根目录 vite.config.ts 配置文件，主要配置包括：

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

打包结果

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

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

预览打包结果

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

pnpm preview

yarn preview

npm run preview

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

常见问题

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

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

NODE_OPTIONS=--max_old_space_size=4096 pnpm build

NODE_OPTIONS=--max_old_space_size=4096 yarn build

NODE_OPTIONS=--max_old_space_size=4096 npm run build

Q: 打包后的文件很大？

A: 检查是否启用了代码压缩与代码分割，可借助 Vite 构建分析插件分析打包体积。

Q: 打包后页面空白？

A: 检查：

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

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

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