如何解决Ionic+Vue3项目中Google条码扫描模块缺失问题？

环境信息 #

• 框架：Vue3 + Ionic
• 插件：@capacitor-mlkit/barcode-scanning
• 测试平台：Android

错误现象 #

调用BarcodeScanner.scan()方法后，Android Studio控制台输出错误：

File: https://localhost/assets/index-DFex7xUL.js - Line 13 - Msg: Error: The Google Barcode Scanner Module is not available. You must install it first.

相关代码 #

Vue组件代码 #

<script setup lang="ts">
import { Barcode, BarcodeScanner } from "@capacitor-mlkit/barcode-scanning";

const startScanning = async () => {
  const { barcodes } = await BarcodeScanner.scan();
};
</script>
<template>
<ion-page>
    <ion-content>
      <ion-fab-button @click="startScanning()">
        <ion-icon :icon="scan"></ion-icon>
      </ion-fab-button>
    </ion-content>
  </ion-page>
</template>

Android端app/build.gradle配置 #

apply plugin: 'com.android.application'

android {
    namespace "io.ionic.starter"
    compileSdk rootProject.ext.compileSdkVersion
    defaultConfig {
        applicationId "io.ionic.starter"
        minSdkVersion rootProject.ext.minSdkVersion
        targetSdkVersion rootProject.ext.targetSdkVersion
        versionCode 1
        versionName "1.0"
        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
        aaptOptions {
             // Files and dirs to omit from the packaged assets dir, modified to accommodate modern web apps.
             // Default: https://android.googlesource.com/platform/frameworks/base/+/282e181b58cf72b6ca770dc7ca5f91f135444502/tools/aapt/AaptAssets.cpp#61
            ignoreAssetsPattern '!.svn:!.git:!.ds_store:!*.scc:.*:!CVS:!thumbs.db:!picasa.ini:!*~'
        }
    }
    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
    buildFeatures {
        dataBinding true
    }
    dataBinding {
        enabled = true
    }
}

repositories {
    flatDir{
        dirs '../capacitor-cordova-android-plugins/src/main/libs', 'libs'
    }
}

dependencies {
    implementation fileTree(include: ['*.jar'], dir: 'libs')
    implementation "androidx.appcompat:appcompat:$androidxAppCompatVersion"
    implementation "androidx.coordinatorlayout:coordinatorlayout:$androidxCoordinatorLayoutVersion"
    implementation "androidx.core:core-splashscreen:$coreSplashScreenVersion"
    implementation project(':capacitor-android')
    testImplementation "junit:junit:$junitVersion"
    androidTestImplementation "androidx.test.ext:junit:$androidxJunitVersion"
    androidTestImplementation "androidx.test.espresso:espresso-core:$androidxEspressoCoreVersion"
    implementation project(':capacitor-cordova-android-plugins')
}

apply from: 'capacitor.build.gradle'

try {
    def servicesJSON = file('google-services.json')
    if (servicesJSON.text) {
        apply plugin: 'com.google.gms.google-services'
    }
} catch(Exception e) {
    logger.info("google-services.json not found, google-services plugin not applied. Push Notifications won't work")
}

已尝试的操作 #

• 在android/app/build.gradle中添加了dataBinding启用配置
• 按照插件文档修改了AndroidManifest.xml配置
• 问题仍未解决，不清楚具体缺失哪部分配置

这个错误的核心是Android项目缺少Google MLKit条码扫描的核心依赖及必要配置，按以下步骤修复：

1. 添加MLKit条码扫描依赖
   在android/app/build.gradle的dependencies块中补充MLKit条码扫描库：

   implementation "com.google.mlkit:barcode-scanning:17.2.0"
   

   版本号可根据最新稳定版调整。

2. 确认Google服务配置

   • 检查项目根目录build.gradle是否包含Google服务classpath：

     buildscript {
         dependencies {
             // 其他依赖...
             classpath 'com.google.gms:google-services:4.4.1'
         }
     }
     

   • 确保android/app/目录下存在google-services.json（可从Firebase控制台下载对应项目的配置文件），若无需Firebase功能，至少保证插件能正常加载。

3. 同步并清理构建

   • 在Android Studio中点击「Sync Project with Gradle Files」同步配置
   • 执行./gradlew clean build清理旧构建文件后重新编译

4. 完善权限处理
   确认AndroidManifest.xml已添加相机权限：

   <uses-permission android:name="android.permission.CAMERA" />
   

   同时在代码中动态申请权限（Android 6.0+要求）：

   import { PermissionState, Permissions } from '@capacitor/core';
   
   const checkCameraPermission = async () => {
     const { camera } = await Permissions.query({ name: 'camera' });
     if (camera.state !== 'granted') {
       const result = await Permissions.request({ name: 'camera' });
       return result.camera.state === 'granted';
     }
     return true;
   };
   
   const startScanning = async () => {
     const hasPermission = await checkCameraPermission();
     if (!hasPermission) {
       // 提示用户授权相机权限
       return;
     }
     const { barcodes } = await BarcodeScanner.scan();
     // 处理扫描结果
   };
   

5. 重新同步插件
   执行npx cap sync android确保Capacitor插件配置完全同步到Android项目

内容的提问来源于stack exchange，提问作者UserE