Packaging Vue client App_vue with Hbuilder

1. Use the NPM Run build command to package the Vue project to generate a packaged file dist.
2. Open dist file directory using Hbuilder


3, in the Hbuilder right key item directory name, the point converts to move the app, will generate Manifest.json file


4, online packaging mobile app
Right key project name, point issue-> Cloud Pack-Play native installation package

Pop-up app to End Pack window, check Android, then click "Parameter Configuration"

In the parameters setting interface, the following figure selects the "Application Information" tab, the second modifies the application name, and the third chooses the page entry.

In the Icon Configuration tab page, as follows

Start diagram (Splash configuration), as shown below

Last Pack

Verify that no permissions are missing and continue packing

Display in the cloud package

You can click Manual Download,


After downloading the APK file can be installed to the mobile phone or in the simulator test, use. After the test is correct, you can shelves each application store.

To note the Config/index.js file:

' Use strict '//Template version:1.2.6//* Http://vuejs-templates.github.io/webpack for documentation. Const PATH = require (' path ') module.exports = {dev: {//Paths assetssubdirectory: ' Static ', assetspublic Path: '/', proxytable: {},//Various Dev Server settings host: ' 192.168.1.91 ',//Can is overwritten by proc
    Ess.env.HOST port:9001,//Can be overwritten by Process.env.PORT, if Port are in use, a free one would be determined Autoopenbrowser:false, Erroroverlay:true, Notifyonerrors:true, Poll:false,//Https://webpack.js.org/co
    nfiguration/dev-server/#devserver-watchoptions-//use Eslint Loader?
    If true, your code would be linted during bundling and//linting errors and warnings would be shown in the console. Useeslint:true,//If true, eslint errors and warnings'll also is shown in the error overlay//in the brow
    Ser.

 Showeslinterrorsinoverlay:false,/** * Source Maps * *   https://webpack.js.org/configuration/devtool/#development devtool: ' Eval-source-map ',//If you have proble Ms Debugging Vue-files in Devtools,//Set this to false-it *may* help//Https://vue-loader.vuejs.org/en/option S.html#cachebusting cachebusting:true,//CSS sourcemaps off by default because relative paths are "buggy"/  /with this option, according to the Css-loader README//(Https://github.com/webpack/css-loader#sourcemaps)//In
    Our experience, they generally work as expected,//Just is aware to this issue when enabling this option. Csssourcemap:false,}, Build: {//Template for index.html index:path.resolve (__dirname, '.. /dist/index.html '),//Paths assetsRoot:path.resolve (__dirname, ' ... /dist '), assetssubdirectory: ' Static ', Assetspublicpath: './',/** * Source Maps/Production Sourcemap:true,//https://webpack.js.org/configuration/devtool/#production DevtoOL: ' #source-map ',//Gzip off by default as many popular static hosts such as//surge or netlify already Gzip a
    ll static assets for you. Before setting to ' true ', make sure to://NPM Install--save-dev Compression-webpack-plugin LSE, Productiongzipextensions: [' js ', ' CSS '],//Run the build command with a extra argument to//View the Bundle Analyzer finishes://' NPM Run Build--report '//Set to ' true ' or ' false ' to always Tur
 n it or Off BundleAnalyzerReport:process.env.npm_config_report}}