打包前的準備工作

確保項目開發已完成，并且已安裝最新版本的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配置：

<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重定向。