uniapp打包成H5部署到服務器教程


當前端uniapp寫的項目開發完成的時候,需要將頁面打包出來,生成H5的靜態文件,部署在服務器上,通過服務器鏈接地址,就可以直接在手機上點開訪問 了。

在網上看了一圈,好像沒有找到十分詳細的教程,這里稍微詳細的記錄了一下,uniapp打包成H5部署到服務器教程。

步驟如下:

1:點擊菜單欄發行,點擊選擇網站-H5手機版,

2:在網站域名這一欄填寫,網站域名,例如www.xxx.com或者你的服務器的IP地址47.103.XX.XX,(這個地址是你將項目打包之后存放放靜態文件的地址)。

我這里為了考慮到安全因素,將自己的服務器地址馬賽克了。

3:點擊高級按鈕,進入到manifest.json的h5配置里面,根據自己的情況配置一些信息,我這里是默認的。

一定要注意配置運行時候的基礎路徑(下圖紅色框標記的地方),如果出現空白頁面或者靜態文件404的情況,可能是因為這個路徑沒有配置好。

(多嘴一句,這個運行的基礎路徑,是和編譯之后的靜態文件的文件夾是一致的,默認是h5,我這里改名字了,我這里將靜態文件h5的文件夾改成了work項目需要)。

4:點擊發行,控制台會自動編譯
注意這個不同於vue,編譯完成的文件不支持本地file協議打開。不要使用資源管理器直接打開。直接打開靜態文件是看不到東西的。出現以下提示,說明編譯成功

5:編譯通過,生成靜態的h5文件,我們需要將這個h5的文件,部署到我們前面填寫的域名(或者服務器的ip)的根目錄底下。

(這個h5在上傳到服務器的時候,可以自己命名,我命名成work了,命名需要和發布之前的高級配置里面路徑保持一致)。

6:找一個工具,連接自己的服務器,進入到自己的服務器的根目錄底下。

我這里用的是Xftp工具。,我在根目錄底下新建了一個work,(即靜態H5的文件夾重命名了)

將static文件夾喝index.html復制進去

圖片.png

好的,這個時候就已經部署成功了。

7:打開瀏覽器,輸入服務器ip地址,訪問一下index.html的內容吧
http://47.10x.xx.78:8091/work/index.html#/
主機ip和端口號也要注意,這里是我的主機和端口號,隱藏起來了。

8:注意,這三個地方的路徑名稱一定要一致哦。
1:打包時候的配置的運行的基礎路徑
2:服務器根目錄底下存放靜態文件static和index.html
3:瀏覽器里面訪問的路徑

OK,這樣就結束了,皆大歡喜,撒花


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM