首頁 > web前端 > js教程 > Vue webapp專案透過HBulider打包原生APP的介紹

Vue webapp專案透過HBulider打包原生APP的介紹

不言
發布: 2018-06-29 10:51:45
原創
2080 人瀏覽過

這篇文章主要介紹了詳解Vue webapp專案透過HBulider打包原生APP,內容挺不錯的,現在分享給大家,也給大家做個參考。

Vue webapp專案透過HBulider打包原生APP

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、最後,展示一下手機上的效果。 ################

以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!

相關推薦:

如何解決vue專案打包後開啟頁面空白的問題

如何解決Vue下路由History模式打包後頁面空白

Vue SPA單頁套用首屏優化的介紹

##

以上是Vue webapp專案透過HBulider打包原生APP的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板