使用Cordova打包Vue移动端项目完整教程

现在使用Vue开发的项目越来越多，移动端打包成为了一个重要问题。前端打包方案有多种，但综合来说，Cordova是一个优秀的选择，可用于Android和iOS的打包，配置完成后只需一条命令即可完成打包。

安装Cordova

在安装Cordova之前，需要先安装Node.js和npm。Node.js可以直接从官网下载最新版本安装，安装后通过命令行运行node -v检查是否成功。npm通常随Node.js一起安装，可以通过npm -v测试。

安装完成后，使用以下命令全局安装Cordova：

npm install -g cordova

安装成功后，运行cordova -v来验证安装，正确安装会显示Cordova的版本号。

新建Cordova项目

执行以下命令来新建Cordova项目：

cordova create myApp1 org.apache.cordova.myApp myApp2
cd myApp1

其中，myApp1是Cordova目录名，org.apache.cordova.myApp是包名，myApp2是项目名（可在config.xml中查看）。生成的文件结构包括：

• config.xml：包含应用信息、插件和平台配置。
• platforms：包含平台相关的Cordova库，如Android和iOS。
• plugins：包含应用所需的插件库。
• www：包含应用源代码，如HTML、JavaScript和CSS文件。
• hooks：包含个性化编译系统的脚本。

然后，添加Android平台：

cordova platform add android

这会在platforms文件夹中生成Android目录，至此Cordova项目创建完成。

新建Vue项目

为了方便编译，建议在Cordova项目根目录中创建Vue项目。首先全局安装Vue-cli脚手架：

npm install -g vue
npm install -g vue-cli

然后使用以下命令初始化Vue项目：

vue init webpack

完成后的目录结构将包含Vue项目文件。

修改文件

修改Vue项目中的config/index.js文件，调整输出路径以确保编译后的文件能自动输出到Cordova的www文件夹中。具体修改包括设置assetsPublicPath和输出目录。

编译Vue项目

在Vue项目根目录下运行以下命令来编译项目：

npm run build

编译完成后，文件会自动输出到Cordova主目录的www文件夹中。

调试打包APK

在打包APK之前，需要确保Android SDK正确安装。运行cordova requirements来检查环境配置，显示正确安装后即可继续。

在Cordova主目录下，使用以下命令联调Android软件（需要连接真机或模拟器）：

cordova run android

要打包成APK，运行：

cordova build android

生成的APK文件位于platforms/android/app/build/outputs/apk/debug/app-debug.apk。

APK签名

APK必须经过数字签名才能安装到设备上。签名需要生成证书（keystore）。使用以下命令生成自签名证书：

keytool -genkey -v -keystore D:\mytest.keystore -alias mytest -keyalg RSA -validity 20000

根据提示输入密钥库口令和其他信息，最后生成mytest.keystore文件。

签名APK有两种方式：

1. 先生成未签名的发布版本APK，然后签名：

   cordova build android --release
   

   生成app-release-unsigned.apk后，在同一目录下运行：

   jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore mytest.keystore app-release-unsigned.apk mytest
   

   签名后修改文件名即可安装。

2. 直接生成带签名的APK：

   cordova build android --release --keystore="mytest.keystore" --alias=mytest --storePassword=testing --password=testing1
   

   其中，storePassword和password替换为生成证书时设置的口令。

为了简化操作，可以在Cordova根目录创建build.json配置文件，内容如下：

{
    "android": {
        "release": {
            "keystore": "mytest.keystore",
            "alias": "mytest"
        }
    }
}

然后运行cordova build --release，在提示时输入口令，即可生成带签名的APK。

通过以上步骤，可以高效地使用Cordova打包Vue移动端项目，实现快速开发和部署。