Vue.js 是一套构建用户界面的渐进式框架，非常适合用来开发单页应用（Single Page Application, SPA）。随着移动互联网的迅猛发展，越来越多的开发者希望将 Vue.js 开发的 Web 应用包装成原生应用发布到 Android 和 iOS 平台。本文将详细介绍如何将 Vue.js 项目打包成原生应用（APP）的具体步骤和原理，帮助初学者快速掌握这一技能。
打包 Vue.js 项目成原生应用的关键在于使用一个合适的跨平台开发框架，如 Cordova 或 Capacitor。这些框架使得我们可以使用 Web 技术（HTML、CSS 和 JavaScript）来开发原生应用，并将其发布到各个平台。本文将以 Cordova 为例，介绍将 Vue.js 项目打包成原生应用的流程。
一、Cordova 简介
Apache Cordova 是一个跨平台项目，它提供了一个原生应用容器，允许运行 Web 源码（HTML、CSS 和 JavaScript）。通过插件系统，Cordova 还可以使 Web 开发者访问原生平台的功能，例如相机、文件系统等。
二、安装环境
1. 安装 Node.js：Cordova 和 Vue.js 均依赖于 Node.js。访问 Node.js 官网（https://nodejs.org/），按照提示下载并安装。
2. 安装 Cordova：打开命令行，使用以下命令安装 Cordova。
```
npm install -g cordova
```
3. 安装 Vue CLI：使用以下命令安装 Vue CLI。
```
npm install -g @vue/cli
```
三、创建 Vue.js 项目
1. 使用以下命令创建一个新的 Vue.js 项目。
```
vue create my-app
```
2. 切换到项目目录，并使用 Vue CLI 运行项目。
```
cd my-app
npm run serve
```
四、集成 Cordova
1. 使用以下命令在 Vue.js 项目中创建 Cordova 目录。
```
cordova create cordova
```
2.进入 cordova 目录，添加平台。
```
cd cordova
cordova platform add ios
cordova platform add android
```
注意：对于 iOS 平台，需要在 Mac 上进行开发，Android 则可以在多个平台上进行。此外，还需要安装相应的平台 SDK，如 Android Studio 和 Xcode。
五、配置 Vue.js 项目
1. 在 Vue.js 项目的根目录创建 vue.config.js 文件，以便将编译产物放置在 cordova/www 中。
```javascript
module.exports = {
outputDir: 'cordova/www',
};
```
2. 修改 public/index.html，为其中适用于 Cordova 应用的元标签。
```html
```
3. 在 package.json 中添加以下 build 脚本。
```json
"scripts": {
"build:cordova
