這篇文章主要介紹了詳解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了。
以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網!
相關推薦:
##
以上是Vue webapp專案透過HBulider打包原生APP的介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!