uniapp打包H5并部署到服务器的核心流程：首先在manifest.json中配置H5参数（如基础路径、路由模式），使用HBuilderX“发行-网站-H5手机版”或CLI命令npm run build:h5生成静态文件（存于/dist/build/h5），将dist文件夹上传至服务器（通过FTP或SSH），配置Nginx指向网站根目录，若使用history路由需设置try_files $uri $uri/ /index.html，最后绑定域名并解析，检查跨域及资源路径，确保浏览器可正常访问。
UniApp H5打包与服务器部署全流程指南
前置准备：环境与工具检查
在开始UniApp H5打包与部署前，需确保以下环境与工具已准备就绪，避免中途因环境问题导致流程中断,以下是详细的准备工作清单：
UniApp开发环境
- HBuilderX：UniApp官方推荐IDE，提供可视化开发界面和一键打包功能，支持代码高亮、语法检查和调试等特性（下载地址：https://www.dcloud.io/hbuilderx.html）。
- Node.js：若需通过命令行方式打包，需安装Node.js（建议选择LTS长期支持版本，下载地址：https://nodejs.org/），用于执行npm/yarn包管理命令和运行构建脚本。
- 浏览器：推荐使用Chrome或Firefox最新版,用于开发测试和调试。
服务器环境
- 操作系统：推荐Linux系统（如CentOS 7+、Ubuntu 18.04+），性能稳定且资源占用低；Windows Server也可部署,但需调整部分配置并注意权限管理。
- Web服务器：Nginx（推荐，轻量高效，适合静态资源托管和反向代理）或Apache（若需兼容PHP等动态语言，可选用）。
- 其他工具：
- FTP/SFTP工具（如FileZilla、WinSCP,用于上传文件）
- Git（若通过代码仓库拉取文件）
- 文本编辑器（如VS Code,用于配置文件修改）
- 域名与解析：需准备已备案的域名（国内服务器必须备案，香港/海外服务器无需备案），并完成域名解析到服务器IP,确保域名可正常访问。
- SSL证书：若需启用HTTPS，需准备SSL证书（可使用Let's Encrypt免费证书或购买商业证书）。
项目配置检查
- manifest.json配置：打开UniApp项目根目录的
manifest.json，确保"应用标识"中的"应用名称"、"应用标识（appId）"已填写，且"模块配置"中勾选了"H5-自适应"相关模块（默认已勾选），同时检查"应用版本号"和"应用版本名称"是否设置正确。 - vue.config.js配置：若项目涉及跨域请求或需修改H5输出路径，需在项目根目录创建
vue.config.js文件（若无则手动创建），配置示例如下：module.exports = { publicPath: './', // 若部署在子目录（如https://domain.com/h5/），需改为'/h5/' outputDir: 'dist', // 打包输出目录（默认为dist，无需修改） assetsDir: 'static', // 静态资源目录（默认为static） productionSourceMap: false, // 生产环境关闭source map，减小文件体积 devServer: { proxy: { // 跨域配置，开发环境有效 '/api': { target: 'https://your-api-server.com', changeOrigin: true, pathRewrite: { '^/api': '' }, secure: false // 若API使用HTTPS且证书无效，可设为false } } } } - 路由模式选择：根据项目需求选择路由模式：
- hash模式：URL中包含#号，如https://example.com/#/home，无需服务器额外配置,刷新页面不会404。
- history模式：URL更美观，如https://example.com/home，但需要服务器配置支持,否则刷新页面会404。
