vue-cli4打包成app

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。