前言

經過上一篇文章的介紹，已經將這個計算器的計算功能實現了，接下來就是我們項目當中的一個發包上線階段，我模擬一下，目的就是為了給大家介紹一下，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

• 如果你有任何問題或建議，歡迎在下方留言，我會儘快回覆
• 如果你覺得本文對你有幫助，歡迎點贊、收藏，你的支持是我寫作的最大動力