快捷導(dǎo)航

詳解Vue webapp項(xiàng)目通過HBulider打包原生APP（vue+webpack+HBulider）

更新時(shí)間：2019年02月02日 09:27:38 作者：羞羞的鐵拳

這篇文章主要介紹了詳解Vue webapp項(xiàng)目通過HBulider打包原生APP（vue+webpack+HBulider），小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

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

更改前：

更改后：

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

然后配置圖標(biāo)

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

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

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

注：網(wǎng)上很多說自己的VUE項(xiàng)目項(xiàng)目打開一片空白，記得改一下config下面的index.js中bulid模塊導(dǎo)出的路徑。因?yàn)閕ndex.html里邊的內(nèi)容都是通過script標(biāo)簽引入的，而你的路徑不對，打開肯定是空白的。先看一下默認(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在同一級目錄下面。所以要改為 ‘./ '

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