前言

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

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

總結

以上是生活随笔為你收集整理的【UniApp】-uni-app-打包成网页的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。