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