Vue CLI 4 是 Vue.js 开发的标准工具，可以帮助您快速地构建 Vue.js 项目。Vue CLI 初始化的项目具有很多内置功能，如热更新、代码压缩、代码分割等。但是，Vue CLI 生成的网站默认情况下是个 SPA（单页面应用），而不是一个可以直接安装到手机上的 App。然而，通过集成 WebView 和使用框架，如 Apache Cordova 或 Capacitor，我们可以将 Vue.js 项目转换为原生应用。
下面，我们将详细介绍如何使用 Vue CLI 4 和 Apache Cordova 打包 Vue.js 项目为 Android 和 iOS 应用。
## Apache Cordova 简介
Apache Cordova 是一个开源的移动开发框架，它允许您使用 Web 技术（HTML、CSS 和 JavaScript）开发跨平台的原生移动应用。Cordova 通过将 Web 项目封装在原生容器中，并通过 WebView 运行，实现了跨平台的开发。WebView 是一个可以显示 web 内容的原生控件，可以让您的 web 应用像原生应用一样运行。
## 开发环境准备
首先，确保您已经安装了 Node.js、Vue CLI 4 和 Android Studio / Xcode 。如果还没有安装，请先安装好这些工具。
1. 安装 Vue CLI 4
```bash
npm install -g @vue/cli
```
2. 安装 Cordova CLI
```bash
npm install -g cordova
```
## 创建和配置Vue项目
1. 使用 Vue CLI 4 创建一个新项目:
```bash
vue create my-app
```
2. 进入项目根目录：
```bash
cd my-app
```
3. 在Vue项目根目录下创建 `vue.config.js` 文件，将编译后的代码输出到 `www` 目录下：
```javascript
module.exports = {
publicPath: "",
outputDir: "www"
};
```
## 配置Cordova项目
1. 在 Vue 项目的根目录下，使用 Cordova CLI 初始化 Cordova 项目：
```bash
cordova create cordova-app
```
2. 将 Vue 项目的 `www` 目录作为 Cordova 项目的 Web 资源目录。将以下行添加到 Cordova 项目（`cordova-app` 目录下）的 `config.xml` 文件中：
```xml
```
## 添加平台
在 Cordova 项目中，您需要添加您想要构建的目标平台，如 Android 或 iOS。进入 Cordova 项目的根目录 (`cordova-app`)，然后执行以下命令：
1. 添加 Android 平台：
```bash
cordova platform add android
```
2. 添加 iOS 平台（需要在 Mac 上进行）：
```bash
cordova platform add ios
```
## 打包构建应用
1. 首先，在 Vue 项目的根目录下，执行以下命令：
```bash
npm run build
```
这将生成编译后的 Web 代码，并将其输出到 `www` 目录下。
2. 进入 Cordova 项目的根目录 (`cordova-app`)，执行以下命令：
```bash
cordova build android
```
或
```bash
cordova build ios
```
构建完成后，您将在 `./platforms/android/app/build/outputs/apk` 或 `./platforms/ios/build` 目录下找到生成的安装包文件。
## 结论
通过以上步骤，您应该已经成功地将 Vue CLI 4 项目打包成了原生安卓或 iOS 应用。需要注意的是，这种方法主要是利用 WebView 嵌入 web 页面，而非纯粹的原生应用。尽管 Cordova 提供了许多插件以实现原生功能，性能和体验可能无法与纯原生应用相媲美。如果需要构建高性能原生应用，可以考虑使用其他框架，如 React Native 或 NativeScript。
