vue打包成app

Vue是一款非常受欢迎的前端开发框架，它的核心理念是可扩展性、可维护性和简洁性，让开发者能够轻松地编写优秀的应用。但Vue并不是一个原生app框架，因此需要一些技术支持将Vue项目打包成app。本文将详细介绍如何将Vue项目打包成app，以及其中的原理。

## 原理

将Vue项目打包成app主要借助于一种被称为混合开发（Hybrid Development）的方法。顾名思义，混合开发是一种将前端界面（HTML、CSS、JavaScript）和原生环境（Android和iOS）相结合的开发方法。它通过一个WebView组件，将前端界面展示，并执行JavaScript脚本，从而扩展其功能，并调用原生能力。

Hybrid开发有很多现成的开发平台和工具，如Cordova、Phonegap、Ionic等。它们在内部都依托于WebView组件，封装了通用的原生接口供JavaScript调用，从而实现了跨平台的特性。但Hybrid开发的一个挑战是，WebView的性能难以与原生开发相抗衡，尤其是在一些流畅度、性能要求非常高的场景。

本文将以Apache Cordova为例，讲解如何使用Cordova将Vue项目打包成Android和iOS应用。

## Cordova的安装与配置

1. 首先，确保你的计算机已安装了Node.js。

2. 使用npm安装Cordova：

```bash

npm install -g cordova

```

3. 创建一个新的Cordova项目：

```bash

cordova create myApp com.example.myapp MyApp

```

这里的`myApp`为你的项目名称、`com.example.myapp`为包名、`MyApp`为应用名称。

4. 进入项目文件夹，添加目标平台，如Android和iOS：

```bash

cd myApp

cordova platform add android

cordova platform add ios

```

注意：iOS平台需要在Mac操作系统下进行。若没有Mac系统，可选择添加Android平台。

5. 为你的Cordova项目安装Vue-cli并创建一个Vue项目：

```bash

npm install -g @vue/cli

vue create my_vue_project

```

跟随提示完成Vue项目的创建。

## Vue项目整合与编译

1. 编辑`my_vue_project/package.json`文件，在`scripts`字段添加新的build命令：

```json

"scripts": {

……

"build-hybrid": "vue-cli-service build --dest ../www"

},

```

这将在构建生产版本时，将编译好的文件复制到Cordova项目的`www`目录下。

2. 编辑`my_vue_project/vue.config.js`文件（若无，创建新文件），添加以下内容以禁用`publicPath`：

```javascript

module.exports = {

publicPath: '',

outputDir: '../www',

indexPath: process.env.NODE_ENV === 'production' ? 'index.html' : 'public/index.html',

productionSourceMap: false,

};

```

3. 编辑Cordova项目的`config.xml`文件，修改`content`行的`src`为`index.html`：

```xml

```

4. 返回到my_vue_project文件夹，运行以下命令进行构建：

```bash

cd my_vue_project

npm run build-hybrid

```

## 运行和打包

1. 使用Cordova运行你的应用，以Android为例：

```bash

cd ..

cordova run android

```

若一切顺利，你的应用将打开并显示Vue应用的界面。

2. 对App进行打包，以方便上传到应用商店或进行测试：

以Android为例，执行如下命令：

```bash

cordova build android --release

```

生成的apk文件将位于`platforms/android/app/build/outputs/apk/release/`文件夹中。

至此，已经完成了将Vue项目打包成Android和iOS应用的过程。现在你可以方便地将你的Vue项目进行跨平台的app开发。