前言
經過上一篇文章的介紹，已經將這個計算器的計算功能實現了，接下來就是我們專案當中的一個發包上線階段，我模擬一下，目的就是為了給大家介紹一下，uni-app是如何打包成網頁的。
除了可以打包成網頁，uni-app還可以打包成小程式、App、H5、快應用等等，後面在單獨開文章詳細介紹。
正文
接著上篇文章的專案來進行，首先找到專案中的 manifest.json 檔案，因為本篇是介紹打包成網頁，所以我們要找到 Web配置：
配置頁面標題
- 配置一下：
頁面標題
配置index.html模板路徑
- 配置
index.html模板路徑：指定 Vue HTML模板的路徑，預設是專案目錄結構下的 index.html，如果你沒有修改過，你就不用填寫這個資訊- 如果你修改了專案結構的 index.html，那麼這個時候你就將你修改的那個模板檔案的路徑填寫在這個配置當中即可，不在過多介紹，我相信大家都知道，如果不知道請在下方留言
配置路由模式
- 配置
路由模式，分別為hash/history，我這裡推薦大家使用hash- 那麼為什麼推薦使用
hash呢？- 這裡就要開啟官方文件才能說明白這個事情了，如下圖：
- 那麼為什麼推薦使用
- 各位大家請看一下，官方說
history部分瀏覽器器不支援，那麼很顯然是有問題是吧，所以我這裡介紹的比較簡單直接，所以直接使用我推薦的 hash 即可好吧
配置執行的基礎路徑
- 配置執行的基礎路徑，其實就是配置你的資源基礎路徑
那 index.html 來舉個例子，開啟 index.html 檔案，當中有 <script type="module" src="/main.js"></script> 這麼一行程式碼，這行程式碼裡面有一個 src 屬性指定的是一個路徑
- 好，那麼這個時候我就要來介紹了，如果說你的資源地址是一個統一的路徑你就可以修改一下這個 src 的地址，例如你的地址是
/h5這代表的是 h5 的資源，將來你也有 app 的資源，你就直接修改這個 src 屬性即可 - 如果如上的這種情況你沒有你就不要去填寫這個執行的基礎路徑
- 這個東西呢，等我下面的介紹打包完畢之後再來看一下
我介紹的這些配置呢，都是比較重要的，下面的都不是非常的重要了，但是還是要介紹完畢。
配置啟用 Https 協議
- 這個配置是在開發階段的配置，我們預設執行專案在瀏覽器中是 http 的並不是 https 的
- 如果能夠提供 https 你就給他勾選上就可以了
配置前端開發服務埠
- 如果說你不想使用它提供的預設埠你可以更改
- 又或者說，埠衝突了你可以更改這個埠
- 配置啟用 https 協議與配置前端開發服務埠是在開發階段去使用的
- 只需要配置好
頁面標題/index.html模板路徑/路由模式/執行的基礎路徑即可
正式打包
- 點選 HBuilderX 工具欄中的
發行->網站-PC Web或手機H5(僅適用於uni-app)(H)：
- 點選之後會彈出一個彈框，在彈框中只需要輸入網站標題即可，其它的都不需要輸，點選發行即可
- 點選發行按鈕之後我截了一張發行之前的專案目錄結構：
注意點，賬號需驗證手機號後才能打包
這是我在發行中遇到的問題，所以給大家介紹到，那麼發行之後，首先觀察控制檯：
給了一個打包之後的路徑給我們，後續只要將這個 dist/build/h5 目錄下的內容放到你自己的伺服器上就可以了，好，到此為止，H5 專案打包就可以打包好了。
單獨介紹一下配置執行的基礎路徑
這個時候我們已經完成好了打包，我們來觀察下打包之後的 index.html 檔案：
可以看到多了一些 assets 這類似的東西，這個時候如果說我想統一給新增一些字首，就可以配置執行的基礎路徑即可，我這裡演示一下，例如我要加一個 h5：
- 然後在重複上面的打包步驟，再次檢視打包之後的 index.html：
End
- 如果你有任何問題或建議，歡迎在下方留言，我會盡快回復
- 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支援是我寫作的最大動力
