Vue webapp項目通過HBulider打包原生APP

標籤：div   ack   size   上下   csdn   icp   .net   water   fill   

1、webapp項目已經通過vue-cli搭建的腳手架寫好了，然後通過webpack打包成一個部署檔案list，如下：

 

2、開啟HBulider,開啟目錄，選擇這個list，項目名稱自己更改。（或者直接建立一個app項目，然後把裡邊的unpackage和manifest這兩個保留下來，其他的替換成自己dist檔案裡邊的內容）

 

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

 

更改前：

 

更改後： 

 

3、在HB中開啟這個dist，可以看到有一個manifest.json的檔案。這個檔案是用來配置應用資訊的。入口檔案一定要對應好，我用VUE寫的單頁應用，所以就一個index.html。

然後配置表徵圖

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

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

串連成功之後，就可以進行真機調試了。

 

註：網上很多說自己的VUE項目項目開啟一片空白，記得改一下config下面的index.js中bulid模組匯出的路徑。因為index.html裡邊的內容都是通過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或者其他的發送到你的手機上，點擊安裝。就可以了。

 

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

 

 

 

 

轉載的：http://blog.csdn.net/wang1006008051/article/details/78065226

Vue webapp項目通過HBulider打包原生APP