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

成都創(chuàng)新互聯(lián)是專業(yè)的翠屏網(wǎng)站建設(shè)公司，翠屏接單;提供成都網(wǎng)站建設(shè)、成都網(wǎng)站設(shè)計,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進行翠屏網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團隊,希望更多企業(yè)前來合作!

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

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

這個時候是web項目，需要改為APP項目（如果直接新建的app，請忽略此步）

更改前：

更改后： 

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

然后配置圖標

按著自己項目的要求配置就行了，HB下面列舉的很詳細。

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

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

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

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默認的是  ‘/'  也就是根目錄。而我們的index.html和static在同一級目錄下面。  所以要改為  ‘./ '

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

// mode: 'history' // 默認hash

5、如果真機測試沒有問題。那么就可以真正的進行打包成APP了。

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

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

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

網(wǎng)頁標題：Vuewebapp項目如何通過HBulider打包原生APP-創(chuàng)新互聯(lián)
分享路徑：http://chinadenli.net/article28/cdpgcp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、面包屑導(dǎo)航、網(wǎng)站營銷、網(wǎng)站導(dǎo)航、品牌網(wǎng)站設(shè)計、企業(yè)建站

廣告

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