uniapp打包前端项目
打包前的准备工作
确保项目开发已完成，并且已安装最新版本的HBuilderX。检查项目中所有依赖是否已正确安装，配置文件如manifest.json已根据H5需求进行适配。
在HBuilderX中打包
- 在 HBuilderX 中，点击顶部菜单栏的 “发行” -> “网站-H5手机版(仅适用于手机)”。
- 在弹出的对话框中，可以填写网站域名等信息，然后点击“发行”按钮。
- HBuilderX 会自动执行打包命令，并在控制台显示打包进度。
配置manifest.json文件
打开项目根目录下的manifest.json文件，在"h5"节点下配置H5相关参数，例如路由模式、基础路径等。示例配置如下：
"h5": {"router": {"mode": "hash","base": "./"},"publicPath": "./","template": "template.h5.html"
}
修改运行基础路径
在HBuilderX中打开项目，点击顶部菜单运行 -> 运行到浏览器 -> 设置运行基础路径，确保路径设置为./以适应H5部署环境。
打包生成H5资源
在HBuilderX顶部菜单选择发行 -> 网站-H5手机版，弹出配置窗口可设置标题和域名。点击发行按钮后，打包生成的资源默认输出到unpackage/dist/build/h5目录。
部署到服务器
将生成的静态资源（包括index.html、js、css等文件）上传至Web服务器。若使用Nginx，需配置try_files确保路由正常：
location / {try_files $uri $uri/ /index.html;
}
解决跨域问题
若H5页面需要请求接口，在manifest.json中配置代理：
"h5": {"devServer": {"proxy": {"/api": {"target": "http://your-api.com","changeOrigin": true}}}
}
适配移动端显示
在index.html模板中添加Viewport配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
注意事项
- 打包后的资源需通过HTTP服务器访问，直接打开本地文件可能导致路由失效。
- 动态API请求需确保服务端支持CORS或配置代理。
- 若使用Vue Router的history模式，需服务端额外配置URL重定向。