vue打包成安卓应用

vue项目

这里讨论已经完成的vue项目，如何将其打包成安卓应用。

在 Vue 项目里接入 Capacitor

Capacitor 是一个跨平台的移动应用开发框架，它可以将 Vue 项目打包成安卓应用。
在项目根目录（有 package.json 的地方）执行：

npm install @capacitor/core @capacitor/cli --save
npm install @capacitor/android --save-dev

初始化 Capacitor（名字和包名你可以自己改）：

npx cap init WenYanPic com.yourname.wenyanpic

Capacitor 会生成一个 capacitor.config.(ts|json)，里面有个 webDir 字段，需要指向你的打包目录，一般是：

  • 如果是 Vite：dist
  • 如果是 Vue CLI：也是 dist

例如（capacitor.config.ts）：

const config = {
  appId: 'com.yourname.wenyanpic',
  appName: 'WenYanPic',
  webDir: 'dist',
};

export default config;

把 Vue 打包成静态文件

在 Vue 项目根目录执行：

npm run build

这会在 dist 目录生成静态文件。
确保 dist 目录里是正常的构建结果（可以先用 npm run dev 验证功能都 OK 再 build）。

生成安卓项目

npx cap add android          # 创建 android 工程
npx cap copy android         # 把 dist 里的前端文件复制进去

之后每次改完前端代码，都要重新：

npm run build
npx cap copy android

使用Android Studio把 Capacitor 项目打包成安卓应用

  1. 打开 Android Studio，选择 Open an Existing Project。
  2. 选择项目中的 android 目录。
  3. 等待 Gradle 同步完成。
  4. 连接真机（打开 USB 调试），或者使用模拟器。
  5. 运行：
    • 菜单栏点击 Run ▶，直接在手机 / 模拟器上安装调试。
  6. 打包 APK：
    • Build → Build Bundle(s) / APK(s) → Build APK(s)。
    • 构建完成后，Android Studio 会在右下角提示 APK 所在路径，拷贝到手机即可安装。
      在 Android Studio 打开 android 目录，点击 Build -> Build Bundle(s) / APK(s) -> Build APK(s)。

移动端适配

vue适配安卓应用

安全区域（safe area insets）在浏览器环境中不会生效，因为这是专门为移动设备（iOS/Android）设计的功能。
安全区域（Safe Area Insets）只在以下情况下生效：
✅ iOS 设备（iPhone X 及以上，有刘海屏/灵动岛）
✅ Android 设备（使用全面屏手势导航）
✅ 打包成原生应用（使用 Capacitor/Cordova）
在浏览器中不会生效的原因：
🚫 桌面浏览器没有刘海屏或底部导航栏
🚫 移动浏览器的安全区域由浏览器自己处理
🚫 Chrome DevTools 的设备模拟器无法模拟安全区域

在index.html里添加：

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

在app.vue中添加安全区域

<style>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  background-color: #f5f5f5;
}

#app {
  height: 100vh;
  /* 添加安全区域 padding，避免被状态栏和导航栏遮挡 */
  /* 先写旧版本的 constant()，再写新版本的 env()，这样新版本会覆盖旧版本 */
  padding-top: constant(safe-area-inset-top, 20px);
  padding-top: env(safe-area-inset-top, 20px);
  padding-bottom: constant(safe-area-inset-bottom, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
</style>

capacitor 配置状态栏插件

在 Vue 项目根目录执行：

npm install @capacitor/status-bar

在 capacitor.config.(ts|json) 里添加：

import type { CapacitorConfig } from '@capacitor/cli'

const config: CapacitorConfig = {
  appId: 'top.kningyuan.wenyanpic',
  appName: 'WenYanPic',
  webDir: 'dist',
  plugins: {
    StatusBar: {
      style: 'LIGHT',
      backgroundColor: '#00000000', // 透明背景
      overlaysWebView: false, // 不让状态栏覆盖 WebView
    },
  },
}

export default config