當前端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,這樣就結束了,皆大歡喜,撒花