Vue WebApp Project package native app via Hbulider

1. WebApp project has been written by VUE-CLI Scaffolding, and then packaged into a deployment file by Webpack list, as follows:

2, open the Hbulider, open the directory, select this list, the project name changes itself. (or create a new app directly, and then keep the unpackage and manifest inside, and replace it with the contents of your dist file)

This time is a Web project and needs to be changed to an app project (ignore this step if you create a new app directly)

Before the change:

After the change:

3, in HB Open this dist, you can see there is a Manifest.json file. This file is used to configure the application information. The entry file must correspond well, I use Vue to write the single page application, so on a index.html.

Then configure the icon

According to the requirements of their own project configuration on the line, HB listed below is very detailed.

4, the next can be connected to the computer by the phone with a USB cable to the real machine debugging. (must be connected via USB cable, people HB does not support what by wireless connection way) Windows computer Needless to say, can use some 360 assistants or something can be solved. If your phone is Android, it's not that good under the Apple Computer. Later through the Baidu add their own groping also made out. The way to do this is to download a software that uses Android File transfer on an Apple computer. To charge, click on the trial to do it. You need to turn on USB debugging on your phone and then select the built-in disc to connect to your Apple computer. The phone also has a hint (really warm heart)

After the connection is successful, the real-machine debugging is possible.

Note: Many online said their Vue project open a blank, remember to change the config below the Index.js bulid module export path. Because the content inside the index.html is introduced through the script tag, and your path is wrong, opening must be blank. Look at the default path first.

Module.exports = {  build: {    env:require ('./prod.env '),    index:path.resolve (__dirname, '. /dist/index.html '),    assetsRoot:path.resolve (__dirname, ' ... /dist '),    assetssubdirectory: ' Static ',    Assetspublicpath: '/',    true,

Assetspublicpath default is '/' is the root directory.  And our index.html and static are below the same level directory. So change to './'

There is also a point to note. SRC inside router/index.js routing configuration inside the default mode is hash, if you change to the history mode, open will also be a blank. So instead of hash or directly delete the mode configuration, let it default on the line.

Mode: ' History '  //default hash

5, if the real machine test no problem. Then you can actually package it into an app.

After the package is successful, you can download it manually or by opening the download directory directly. Send this xxxx.apk file to your phone via QQ or other, click Install. You can do it.

6. Finally, show the effect on the phone.

Reprinted by: http://blog.csdn.net/wang1006008051/article/details/78065226

Vue WebApp Project package native app via Hbulider