Vue中webapp項(xiàng)目如何通過(guò)HBulider打包原生APP-創(chuàng)新互聯(lián)

這篇文章主要介紹了Vue中webapp項(xiàng)目如何通過(guò)HBulider打包原生APP，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

創(chuàng)新互聯(lián)公司堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站制作、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿(mǎn)足客戶(hù)于互聯(lián)網(wǎng)時(shí)代的洞口網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

Vue webapp項(xiàng)目通過(guò)HBulider打包原生APP

1、webapp項(xiàng)目已經(jīng)通過(guò)vue-cli搭建的腳手架寫(xiě)好了，然后通過(guò)webpack打包成一個(gè)部署文件list，如下：

2、打開(kāi)HBulider,打開(kāi)目錄，選擇這個(gè)list，項(xiàng)目名稱(chēng)自己更改。（或者直接新建一個(gè)app項(xiàng)目，然后把里邊的unpackage和manifest這兩個(gè)保留下來(lái)，其他的替換成自己dist文件里邊的內(nèi)容）

這個(gè)時(shí)候是web項(xiàng)目，需要改為APP項(xiàng)目（如果直接新建的app，請(qǐng)忽略此步）

更改前：

更改后： 

3、在HB中打開(kāi)這個(gè)dist，可以看到有一個(gè)manifest.json的文件。這個(gè)文件是用來(lái)配置應(yīng)用信息的。入口文件一定要對(duì)應(yīng)好，我用VUE寫(xiě)的單頁(yè)應(yīng)用，所以就一個(gè)index.html。

然后配置圖標(biāo)

按著自己項(xiàng)目的要求配置就行了，HB下面列舉的很詳細(xì)。

4、接下來(lái)可以通過(guò)手機(jī)用USB線(xiàn)與電腦連接進(jìn)行真機(jī)調(diào)試。（必須通過(guò)USB線(xiàn)連接才可以，人家HB不支持什么通過(guò)無(wú)線(xiàn)連接的方式）windows電腦不用說(shuō)了，可以用一些360助手什么的就可以解決了。如果你的手機(jī)是安卓的，在蘋(píng)果電腦下面就沒(méi)那么好搞了。后來(lái)通過(guò)百度加自己的摸索也搞出來(lái)。方法就是在蘋(píng)果電腦上下載一個(gè)使用 Android File Transfer這個(gè)軟件。要收費(fèi)時(shí)，點(diǎn)擊試用就可以了。手機(jī)上需要打開(kāi)usb調(diào)試，然后選擇 內(nèi)置光盤(pán) 就可以與蘋(píng)果電腦連接了。手機(jī)自己也有提示（真的很暖心）

連接成功之后，就可以進(jìn)行真機(jī)調(diào)試了。

注：網(wǎng)上很多說(shuō)自己的VUE項(xiàng)目項(xiàng)目打開(kāi)一片空白，記得改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)閕ndex.html里邊的內(nèi)容都是通過(guò)script標(biāo)簽引入的，而你的路徑不對(duì)，打開(kāi)肯定是空白的。先看一下默認(rèn)的路徑。

module.exports = {
 build: {
  env: require('./prod.env'),
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '/',
  productionSourceMap: true,

assetsPublicPath默認(rèn)的是  ‘/'  也就是根目錄。而我們的index.html和static在同一級(jí)目錄下面。  所以要改為  ‘./ '

另外還需要注意一點(diǎn)。src里邊router/index.js路由配置里邊默認(rèn)模式是hash，如果你改成了history模式的話(huà)，打開(kāi)也會(huì)是一片空白。所以改為hash或者直接把模式配置刪除，讓它默認(rèn)的就行 。

// mode: 'history' // 默認(rèn)hash

5、如果真機(jī)測(cè)試沒(méi)有問(wèn)題。那么就可以真正的進(jìn)行打包成APP了。

打包成功后，可以通過(guò)手動(dòng)下載，或者直接打開(kāi)下載目錄里邊下載好的。把這個(gè)xxxx.apk文件通過(guò)qq或者其他的發(fā)送到你的手機(jī)上，點(diǎn)擊安裝。就可以了。

6、最后，展示一下手機(jī)上的效果。

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“Vue中webapp項(xiàng)目如何通過(guò)HBulider打包原生APP”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持創(chuàng)新互聯(lián)，關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來(lái)學(xué)習(xí)!

新聞標(biāo)題：Vue中webapp項(xiàng)目如何通過(guò)HBulider打包原生APP-創(chuàng)新互聯(lián)
URL鏈接：http://muchs.cn/article48/ddjpep.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)建站、面包屑導(dǎo)航、關(guān)鍵詞優(yōu)化、外貿(mào)網(wǎng)站建設(shè)、搜索引擎優(yōu)化、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)