Cordova Packaged Vue2 App

use Cordova pack vue2 (webpack) app for Android iOS 1. Vue ProjectBuild a project with VUE-CLI scaffolding, use Webpack for packaging, and below is a set of commands.

#npm version is best up-to-date, the upgrade Npm,node version also requires
NPM  i-g npm

# Installation Scaffold
npm install-g vue-cli

#初始化新建项目
vue Init  Webpack Vue-app

# Install Dependencies
# config/index.js can modify port
npm install

# Serve with hot reload at localhost:8080
npm Run Dev

# Package Project
NPM Run build

# Build for production and view the bundle Analyzer R Eport
NPM Run Build--report

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 in index.html Add the following label to not let him zoom out

<meta name= "viewport"
        content= "width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0 , User-scalable=no ">

1 2

When NPM run build packages The project, modify the Config/index.js file as shown in the figure

Assetspublicpath default is the root path, which changes to the current relative path, or is empty.

Productionsourcemap is used to support debugging after packaging, instead of false, packaging is faster

The packaged file will be placed in the dist under the project root path and will be used in the rear. Copying files

Because Webpack can not put your pictures and other resources to the appropriate location, you run index.html, you will find that the image he requested is css/static/img, so in Package.json add the following two commands. Then modify the build command so that he can compress the code and execute the copy command, so that you don't have to copy the file every time.

"Build": "Node Build/build.js && npm run Fixfont && npm run Fiximg", "
Fixfont": "Xcopy%cd%\\dist\\sta Tic\\fonts%cd%\\dist\\static\\css\\static\\fonts/s/y/d/e/i ",
" fiximg ":" Xcopy%cd%\\dist\\static\\img%cd%\\ dist\\static\\css\\static\\img/s/y/d/e/i "

1 2 3

NPM Run Build

1

* Note: Packaged index.html can not be opened directly with the browser, when packaging is prompted. IDE development tools can be index.html run up, see if there are any errors, I will prompt the picture 404 is not found, very depressed his request path, finally follow his path, the IMG placed in the CSS folder. 2. Cordova Project

The packaged Vue H5 project needs to be packaged into Android and iOS projects using Cordova. Support cross-domain Cordova official website Command Introduction

Create a Cordova project, the app name Mapp, the package name (bundle ID) is Com.trgis, the project name is Cordova-app

NPM install-g Cordova

1

Cordova Create Cordova-app Com.trgis Mapp

1

Copy all files from the Dist directory in the Vue project to the WWW directory of the Cordova project

CD Cordova-app

1

Pack iOS or Android, I'm using an Android environment

Cordova Platform Add iOS--save

Cordova platforms add Android--save

1 2 3

After this step is completed, in the Project platforms folder will find more folders, I am the Android environment, the package after the project name is Android. This shows that Vue and Cordova integration have been successful. 3. Pack apk with Androidstudio

Cordova has the command to provide support for compiling the APK, but I really can't stand that speed, slow death. So just go to Androidstudio to compile. Directly using as to open the Cordova project under the platforms in the Android project, you will be prompted to upgrade Gradle version and the like, it is best to upgrade. With as directly installed on the real machine for debugging, to this Android packaging completed, iOS I currently have no environment, post-update post. 4. Package with Xcode8-iOS project can only be created on Mac system
First, install node on your Mac, then install Codorva with node and create a new Cordova project

Cordova Platform Add iOS--save

1

Installing Xcode

Install Xcode8 in AppStore, if your Mac system is not updated, or update it, because Xcode8 has an impact on the system version. Installation time may be longer, it is recommended that you wait a little more. Once installed, use Xcode to open the newly created iOS project, or you can double-click the profile under iOS, and the default will open Xcode and load the project. Well, there's going to be some annoying things to do, and iOS is a hassle.

Xcode8 Edit App App chart

iOS chart limitations are strict, the general chart is thrown in, the compilation is not enough, here we use the app icon Gear to generate the icon. Search and install app Icon Gear in AppStore for free trial. Double-click to open, follow the picture selection.

After selecting a picture, drag the app's chart to the first box on the left, and he will automatically generate

So many pictures of their own replacement is not realistic, of course, also provides the function of batch modification, open Xcode folder icon, drag to the Green Arrow box, follow the picture, he will be batch replacement.

If you find that the packaging of the picture is not right, here to choose AppIcon, in fact, is to find the icon just generated the file, well, to here Xcode8 Modify the app icon chart even completed. As for the Welcome page, as with this step, it is only the first step to choose a horizontal or vertical screen.