使用 Cordova 打包 Vue 的移动端应用

这是一个区别于 uni-app 的纯 H5 的打包方案，不支持小程序，当时还在读大二的时候被我用于一个课程大作业，现在开新项目的话用 taro 更合适。

Cordova 安装

使用 npm 安装 cordova 命令行:

1
npm install -g cordova

创建 Vue 项目:

1
vue create cordova-test

找了一圈 Vue 的 Cordova 插件，个人觉得最好用的是这个: vue-cli-plugin-cordova-simple。这位老哥写得这么好，都没人帮他宣传。

1
vue add vue-cli-plugin-cordova-simple

新建 vue.config.js 文件:

1
2
3
module.exports = {
  publicPath: "./",
};

另外，router 不要使用 history 模式，使用 hash 模式。

iOS 环境配置

iOS 环境只能在 Mac 中配置。

先用 cordova 命令行为项目添加 iOS 打包工具。

1
cordova add ios

在 App Store 安装 Xcode
安装 ios-deploy
使用 npm 安装:
1
npm install -g ios-deploy
安装 CocoaPods
gem 是 Ruby 的包管理器，Mac 自带 Ruby，直接用就行了。
1
sudo gem install cocoapods
检验环境
1
cordova requirements
如果没有任何报错，就没问题了。
运行
1 2
npm run build cordova run ios

报错: xcode-select: error: tool ‘xcodebuild’ requires Xcode, but active developer directory ‘/Library/Developer/CommandLineTools’ is a command line tools instance
由于我一开始在我的 Mac 上安装环境的时候，单独安装了 Xcode 的 CommandlineTools，后面又安装 Xcode，我的机子上有两个 CommandlineTools。而当前使用的那个 CommandlineTools 是不在 Xcode 下面的那个。
我们需要更改一下 CommandlineTools 的目录：
1
xcode-select -switch /Applications/Xcode.app/Contents/Developer/

Android 环境配置

安装 JDK
一般来说，推荐使用 JDK 1.8。
安装 Android Studio
安装 Android SDK
打开 Android Studio 的 SDK Manager。
目前最新版的 cordova-android 是 9.0.0，刚刚支持了 Andorid 10( API 29 )，所以我们就安装 Android 10 就好了。
早期版本的 cordova-android 和 android api 版本的关系可以去官网。
创建虚拟设备
打开 AVD Manager，选一下机型和系统镜像就好了，注意前面的安卓版本兼容。
安装 Gradle
首先，你需要一个 Gradle 命令行，直接用 brew 吧。( 安装半天 )
1
brew install gradle
然后，现在你应该已经能通过 cordova requirements 的测试了，但是还没完。
因为 Android 打包默认使用 gradle wrapper，所以它应该会下载一个版本的 gradle 到你的本地，路径在 ~/.gralde/wrapper/dists/gradle-xx-all/xxxxx/，建议立刻停止进程，然后自己另外下一个相同版本的替换它。
把下载链接复制到迅雷，可以快速下载 gradle 包。
运行
先打开虚拟设备，然后运行:
1 2
npm run build cordova run android

题外话

history 和 hash 模式

两者使用上的区别是 history模式 需要一个服务器，而 hash模式 不需要。

hash模式 通过 URL锚点 模拟页面跳转。
history模式 通过 HTML5 history interface 模拟页面跳转，因为单页面应用只打包出了一个单一的入口，所以需要一个服务器把所有请求重定向到 index.html 上。

如果是网页端开发的话，用 history模式 无疑是最好的，如果是移动端或者桌面端的程序，用 hash模式 更方便。

配置资源文件

找不到资源文件。因为 Vue 在引用资源文件的时候按绝对路径去寻找，可以把他们作为。这个有解决方案。

新建 vue.config.js 文件:

1
2
3
module.exports = {
  publicPath: "./",
};

如何寻找Vue插件

开启 Vue 项目管理工具:

1
vue ui

里面分为依赖和插件两部分。

依赖一般是官方发布的，能保持最新，且 BUG 较少，就是配置起来麻烦。

插件就是整合依赖的工具，质量参差不齐，但是插件可以做到开箱即用，很方便。只是有些插件的作者不是很上心，占着显眼的名字，质量却不如一些冷门的好。

祝大家运行成功！