使用 cordova 将vue项目打包为APP流程

安装cordova流程

什么是 cordova

cordova 是由 Apache 基金会支持的，使用 HTML5 + CSS3 + JS 来构建多平台 APP 程序的开发框架。其支持调用手机系统（Android、IOS、Windows phone）原生 API，它可以将你写的 Web 程序包裹进原生的 APP 壳中，也就是我们常说的 Hybrid APP （混合应用）。本文是一个前端开发者如何从 0 开始结合 Vue 来构建一个简单的 APP.

第一步，安装 cordova

安装 cordova

cordova 提供一个可以全局安装的脚手架工具，我们使用 npm 来安装，你的电脑还没有 npm 的话，需要先安装 node，node 本身自带 npm 包管理器，安装好 node 之后，我们打开命令行程序，输入以下命令，全局安装 cordova：

npm install -g cordova

下载完之后，输入 cordova -v 查看是否成功安装，出现相应的版本号则成功安装。
创建cordova项目

安装好之后，我们在新建的项目目录来新建一个 cordova 应用，在命令行输入以下命令新建：

cordova create learn-cordova

创建完成后，进入项目文件夹，安装cordova的一些插件
下载安卓环境：

cordova platform add android

检查构建APP的条件

cordova requirements

条件不完全满足无法构建APP
恭喜你，准备工作基本完成了！

构建APP，第一次打包时间会比较长，请耐心等待，时间真的很长，可能会让你以为命令行卡住了 ^ ~ ^

cordova build android

可能你的第一次打包会直接失败，这是因为没有安装 安卓SDK，这一点很重要。
至于如何安装安卓环境，请自行搜索。

下面介绍一些cordova的常用命令
项目的Cordova基本命令
初始化文件夹

cordova create cordova-app com.lxlazy.www.app cordovaApp 

进入项目
cd cordova-app

添加平台 以及对应的安卓版本，需要下载对应的SDK

cordova platform add [email protected] 

检查依赖

cordova requirements 

真机调试

cordova run 

添加插件

cordova plugin add XXXX 

查看安装的插件

cordova plugins 

卸载插件

cordova plugin remove XXXX 

编译 打包成 apk文件

cordova build android

一些常见问题记录

1. 需要打包的HTML，css，js文件 应该放在项目的www文件中，打包前将www文件夹清空，将vue项目打包后生成的dist文件夹中的内容复制到www文件夹中，然后执行cordova build android
2. 首屏白屏问题
   在vue项目目录下config文件夹中找到index.js打开把build下的assetsPublicPath: '/'改成assetsPublicPath: ‘./’
   …