uniapp開發(fā)打包成H5部署到服務(wù)器的詳細(xì)步驟
前端使用uniapp開發(fā)項目完成后，需要將頁面打包，生成H5的靜態(tài)文件，部署在服務(wù)器上。
這樣通過服務(wù)器鏈接地址，直接可以在手機(jī)上點開來訪問。
打包全步驟如下：
一、點擊菜單欄“發(fā)行”，點擊選擇“網(wǎng)站-PC Web或手機(jī)H5”，
二、填寫網(wǎng)站標(biāo)題和網(wǎng)站域名/服務(wù)器的IP地址。
（這個地址是將項目打包之后存放靜態(tài)文件的地址)
三、點擊進(jìn)入manifest.json的h5配置里，根據(jù)自己的情況配置一些信息。
一定要注意配置 “運行的基礎(chǔ)路徑”，如果出現(xiàn)空白頁面或者靜態(tài)文件404的情況，可能是因為這個路徑?jīng)]有配置好。
四、點擊發(fā)行，控制臺會自動編譯。出現(xiàn)以下提示，說明編譯成功：
五、點擊上圖中的紅框部分，就能看到已經(jīng)打包好的靜態(tài)頁面了。（直接把這個h5文件壓縮一下，發(fā)給后端就可以了）
如需要自己上傳到服務(wù)器上，可繼續(xù)以下步驟。
六、先拿到服務(wù)器的地址信息，找一個工具，連接上該項目的服務(wù)器，進(jìn)入到服務(wù)器的根目錄底下。
我這里用的是ftp工具。在根目錄底下新建一個aofan文件夾，然后將上圖中的static文件夾和index.html復(fù)制進(jìn)去即可。
OK，這個時候就已經(jīng)部署成功了。
七、打開瀏覽器，輸入服務(wù)器ip地址，訪問一下index.html的內(nèi)容即可。
注意點：這三個地方的路徑名稱一定要一致。
1：打包時候的配置的運行的基礎(chǔ)路徑
2：服務(wù)器根目錄底下存放靜態(tài)文件static和index.html
3：瀏覽器里面訪問的路徑
到此這篇關(guān)于uniapp如何打包成H5部署到服務(wù)器的文章就介紹到這了,更多相關(guān)uniapp打包成h5內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue中inheritAttrs的使用實例詳解,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-12-12
這篇文章主要給大家介紹了關(guān)于Vue中插槽slot的使用方法與應(yīng)用場景的相關(guān)資料,插槽（Slot）是Vue提出來的一個概念，正如名字一樣，插槽用于決定將所攜帶的內(nèi)容，插入到指定的某個位置，從而使模板分塊，具有模塊化的特質(zhì)和更大的重用性,需要的朋友可以參考下2021-06-06
這篇文章主要介紹了組件庫中使用 vue-i18n 國際化,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-04-04
使用vue init webpack項目名創(chuàng)建項目方式
這篇文章主要介紹了使用vue init webpack項目名創(chuàng)建項目方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-11-11
vue+vuecli+webpack中使用mockjs模擬后端數(shù)據(jù)的示例
本篇文章主要介紹了vue+vuecli+webpack中使用mockjs模擬后端數(shù)據(jù)的示例，具有一定的參考價值，感興趣的小伙伴們可以參考一下。2017-10-10
最近在做小程序開發(fā)的時候，遇到了點問題。最終選擇用mpvue來做，誰知這么多坑，下面小編把我遇到的問題分享給大家，如果大家對mpvue小程序仿qq左滑置頂刪除組件相關(guān)知識感興趣的朋友一起看看吧2018-08-08
這篇文章主要介紹了vue中如何禁止input框和textarea編輯，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
vue實現(xiàn)微信分享鏈接添加動態(tài)參數(shù)的方法
這篇文章主要介紹了vue微信分享鏈接添加動態(tài)參數(shù)的實現(xiàn)方法，本文通過實例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue中如何使用elementUI表格動態(tài)行合并，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式
這篇文章主要介紹了Nuxt封裝@nuxtjs/axios請求后端數(shù)據(jù)方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10