使用 Cordova 跨平台打包 Vue

原创已于 2023-12-17 20:19:25 修改 · 1.2k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#1024程序员节 #vue #cordova #android #ios

于 2020-10-24 22:08:07 首次发布

想要更好的阅读体验，可以转我的个人博客。

文章目录

Cordova 安装

使用 npm 安装 cordova 命令行:

npm install -g cordova

创建 Vue 项目:

vue create cordova-test

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

vue add vue-cli-plugin-cordova-simple

新建 vue.config.js 文件:

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

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

iOS 环境配置

iOS 环境只能在 Mac 中配置。

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

cordova add ios

在 App Store 安装 Xcode
安装 ios-deploy

使用 npm 安装:
```
npm install -g ios-deploy
```
安装 CocoaPods

gem 是 Ruby 的包管理器，Mac 自带 Ruby，直接用就行了。
```
sudo gem install cocoapods
```
检验环境
```
cordova requirements
```
如果没有任何报错，就没问题了。
运行
```
npm run build
cordova run ios
```

{% note info %}

报错: 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 的目录：

xcode-select -switch /Applications/Xcode.app/Contents/Developer/

{% endnote %}

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 吧。( 安装半天 )
```
brew install gradle
```
然后，现在你应该已经能通过 cordova requirements 的测试了，但是还没完。

因为 Android 打包默认使用 gradle wrapper，所以它应该会下载一个版本的 gradle 到你的本地，路径在 ~/.gralde/wrapper/dists/gradle-xx-all/xxxxx/，建议立刻停止进程，然后自己另外下一个相同版本的替换它。

{% note info %}

怎么快速下载 gradle 包

把下载链接复制到迅雷，秒下。

{% endnote %}
运行

先打开虚拟设备，然后运行:
```
npm run build
cordova run android
```

题外话

history 和 hash 模式

vue router 默认使用 hash模式，这项技术本质上就是 URL锚点 ，我们知道 vue 开发的 SPA 只有一个页面，页面跳转功能是模拟出来的，使用 URL锚点 在页面中跳转属于常规操作。

history模式 利用了 HTML5 history interface，基于浏览器记录栈进行跳转，这种模式下的 URL 会更好看，更加符合直觉。

history模式 有一个问题: 和文件系统不兼容。

我的建议是，如果是网页端开发的话，用 history模式 无疑是最好的，如果你的项目的目标是移动端的程序，最好用 hash模式。

为什么 history 模式不兼容文件系统

我们来做一个简单的小测试。

我们在以下目录打包一个 Vue 的项目: /Users/nonlinearthink/Documents/projects/app/dist/index.html，并在文件系统下直接用浏览器打开它。

然后点击跳转的路由，仔细观察浏览器顶部 URL 的变化。我这里点击了 about 页面，结果直接变成了，/about。

本质上，是因为这种情况下，路径跳转使用的是绝对路径。

当然，我猜你的页面是空白页。

出现空白页的原因

找不到资源文件。因为 Vue 在引用资源文件的时候也是按绝对路径的，所以也和文件系统不兼容。这个有解决方案。

新建 vue.config.js 文件:

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

如何寻找Vue插件

开启 Vue 项目管理工具:

vue ui

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

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

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

祝大家运行成功！