实用指南：uniapp打包前端项目

打包前的准备工作

确保项目开发已完成，并且已安装最新版本的HBuilderX。检查项目中所有依赖是否已正确安装，配置文件如manifest.json已根据H5需求进行适配。

在HBuilderX中打包

1. 在 HBuilderX 中，点击顶部菜单栏的 “发行” -> “网站-H5手机版(仅适用于手机)”。
2. 在弹出的对话框中，可以填写网站域名等信息，然后点击“发行”按钮。
3. 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配置：

注意事项

• 打包后的资源需通过HTTP服务器访问，直接打开本地文件可能导致路由失效。
• 动态API请求需确保服务端支持CORS或配置代理。
• 若使用Vue Router的history模式，需服务端额外配置URL重定向。