UniApp开发H5应用后，需通过HBuilderX的“发行”功能选择H5类型，生成静态文件（含dist目录），随后通过FTP/SFTP或云存储工具将静态文件上传至服务器，确保文件路径正确，服务器端需配置Nginx，设置根目录指向静态文件路径，并配置跨域、HTTPS等安全策略，若涉及接口请求，需在Nginx中配置代理转发至后端服务，最后重启Nginx服务，通过浏览器访问域名验证部署效果，确保页面正常加载且功能可用。
UniApp H5项目发布与服务器部署完整指南
UniApp凭借其“一次开发，多端发布”的核心优势，已成为跨平台应用开发的主流框架之一，其H5（Web）版本因其无需下载安装、可通过链接直接访问的特性，在官网展示、营销活动推广、轻量化业务应用等场景中得到了广泛应用，本文将系统性地介绍UniApp H5项目的发布全流程，涵盖从本地构建优化到服务器部署配置，再到上线后常见问题的排查与解决，旨在帮助开发者高效、顺畅地将项目成功上线。
发布前关键准备工作
在正式启动H5项目部署流程之前,务必完成以下关键准备工作，以避免后续操作中可能出现的各种问题，确保部署过程顺利进行。
项目代码检查与深度优化
- 功能完整性验证：确保项目所有核心功能已按需开发完成，无明显功能性Bug，建议利用浏览器开发者工具（F12）的Console面板实时监控并排查运行时错误。
- 性能深度优化：重点检查并优化项目性能，对图片资源进行压缩处理（使用工具如TinyPNG、ImageOptim）；审查并移除不必要的第三方库依赖（利用Webpack Bundle Analyzer等工具分析依赖包体积）；确保代码逻辑高效，避免冗余计算。
- 多端兼容性测试：务必在主流桌面浏览器（Chrome, Firefox, Safari, Edge）及多种移动设备（iOS, Android）上，全面测试页面的显示效果、交互逻辑及功能表现，确保跨平台一致性体验。
uni-app H5核心配置确认
项目根目录下的manifest.json文件是H5配置的核心，需重点关注以下H5相关配置项：
{
"name": "Your-Project-Name",
"appid": "__UNI__XXXXXXX",
"description": "",
"versionName": "1.0.0",
"versionCode": "100",
"transformPx": false, // 是否自动转换px为rpx（移动端项目建议开启为true）
"h5": {
"router": {
"mode": "hash", // 路由模式：hash（带#）或history（不带#），history模式需服务器配置支持
"base": "/" // 项目基础路径（部署在子目录时需修改，如"/your-project/"）
},
"publicPath": "./", // 静态资源路径（默认"./"，部署到CDN时需修改为CDN地址）: "Your Project Title" // 页面标题（原配置中注释掉，此处修正并明确）
}
}
- 路由模式选择：
hash模式：URL中包含符号（如http://domain.com/#/path），该模式无需额外服务器配置，兼容性极佳，推荐作为首选。history模式：URL更美观（如http://domain.com/path）。**但必须**在服务器（如Nginx）中配置try_files规则，以解决刷新页面或直接访问子路径时出现的404问题。
- 基础路径（Base Path）配置：若项目需要部署在服务器的子目录下（
http://yourdomain.com/your-project/），**必须**将h5.router.base和h5.publicPath同时修改为对应的子目录路径（如"/your-project/"），这是确保资源正确加载的关键。
多环境接口地址配置
开发环境（dev）、测试环境（test）与生产环境（prod）的API接口地址通常不同，需通过环境变量进行灵活切换，避免硬编码：
- 创建环境变量文件：在项目根目录下创建
.env系列文件：.env.development：开发环境变量（如VITE_API_BASE_URL=http://dev-api.example.com）.env.production：生产环境变量（如VITE_API_BASE_URL=https://api.example.com）
- 在代码中引用环境变量：在需要调用接口的地方，使用构建工具（如Vite/Webpack）注入的环境变量：
// 示例：使用环境变量构建API基础URL const apiBaseUrl = import.meta.env.VITE_API_BASE_URL || 'http://default-api.example.com'; const apiUrl = `${apiBaseUrl}/your/endpoint`; - 构建时指定环境：执行构建命令时，通过参数指定使用哪个环境变量文件（具体命令取决于构建工具，如Vite的
--mode参数）。
构建产物准备
完成上述检查与配置后,即可执行构建命令生成用于部署的静态文件：
# 使用HBuilderX（图形化界面） # 菜单：发行 -> 网站-PC端/手机端 -> 输出目录（默认为 /unpackage/dist/build/h5）使用命令行（推荐）
安装依赖
npm install
构建生产环境H5包（输出到 dist 目录）
npm run build:h5
构建完成后,在指定输出目录（默认为dist或unpackage/dist/build/h5）下会生成包含index.html、static文件夹（存放JS/CSS/图片等资源）的静态文件，这些就是最终要部署到服务器的文件。
