uni-app 引入 supabase 运行到 android 基座报错

发布于 1周前 作者 htzhanglong 来自 Uni-App

uni-app 引入 supabase 运行到 android 基座报错

项目中引入 Supabase 登录认证的问题

在项目中引入了 supabase 作为登录认证。H5页面下运行正常,运行到 android / ios 基座时,报错如下:

报错信息

16:35:03.405 项目 'my-project' 开始编译...  
16:35:16.374 请注意运行模式下,因日志输出、sourcemap 以及未压缩源码等原因,性能和包体积,均不及发行模式。  
16:35:16.384 编译器版本:4.29(vue3)  
16:35:16.396 正在编译中...  
16:35:34.804 [@vue/compiler-sfc] `defineProps` is a compiler macro and no longer needs to be imported.  
16:35:34.819   
16:35:34.833 [@vue/compiler-sfc] `defineEmits` is a compiler macro and no longer needs to be imported.  
16:35:34.846   
16:35:34.861 [@vue/compiler-sfc] `defineExpose` is a compiler macro and no longer needs to be imported.  
16:35:36.091 ../../../../F:/App/my-project/node_modules/@supabase/auth-js/dist/module/lib/fetch.js (3:14): Error when using sourcemap for reporting an error: Can't resolve original location of error.  
16:35:36.108 ../../../../F:/App/my-project/node_modules/@supabase/auth-js/dist/module/lib/fetch.js (3:22): Error when using sourcemap for reporting an error: Can't resolve original location of error.  
16:35:48.928 Invalid value "iife" for option "output.format" - UMD and IIFE output formats are not supported for code-splitting builds.

Supabase 引入方式

import { createClient } from '@supabase/supabase-js';  

const supabaseUrl = import.meta.env.VITE_SUPABASE_URL;  
const supabaseAnonKey = import.meta.env.VITE_SUPABASE_ANON_KEY  

export const supabase = createClient(supabaseUrl, supabaseAnonKey);

我猜测需要修改编译配置。但我是第一次使用uni-app,项目使用 HbuilderX 编译运行. 没有找到修改的地方。

希望大佬们看看如何解决这个问题,不胜感激!

开发环境与版本信息

详情
编译器版本 4.29(vue3)
项目创建方式 使用 HbuilderX 编译运行

2 回复

在处理 uni-app 引入 supabase 并运行到 Android 基座时遇到的报错问题,我们可以从以下几个方面来排查和解决。由于你要求尽量给出相关代码案例而非建议,我将直接展示如何在 uni-app 中集成 supabase 客户端,并假设报错可能与环境配置或依赖引入有关。

1. 安装 Supabase 客户端

首先,确保你已经在项目中安装了 supabase-js 库。你可以通过 npm 或 yarn 安装:

# 使用 npm
npm install supabase-js

# 或者使用 yarn
yarn add supabase-js

2. 引入并使用 Supabase

在你的 uni-app 项目中,通常在 main.js 或某个组件文件中引入并使用 Supabase 客户端。以下是一个基本的例子:

// main.js 或其他合适的位置
import { createClient } from 'supabase-js';

// 替换为你的 Supabase URL 和匿名密钥
const supabaseUrl = 'https://your-supabase-url.supabase.co';
const supabaseAnonKey = 'your-anon-key';
const supabase = createClient(supabaseUrl, supabaseAnonKey);

Vue.prototype.$supabase = supabase; // 将 supabase 挂载到 Vue 实例上,方便全局使用

new Vue({
    store,
    ...App
}).$mount('#app')

3. 在组件中使用 Supabase

在 Vue 组件中,你可以通过 this.$supabase 访问 Supabase 客户端,例如进行认证或数据库操作:

export default {
    methods: {
        async signUp() {
            try {
                const { user, session, error } = await this.$supabase.auth.signUp({
                    email: 'test@example.com',
                    password: 'yourpassword123'
                });
                console.log(user, session);
            } catch (error) {
                console.error('Error signing up:', error);
            }
        }
    }
}

4. 检查报错信息

如果运行到 Android 基座时报错,请检查以下几点:

  • 确保 supabase-js 库兼容当前的 uni-app 和 Android 环境。
  • 查看控制台或日志中的具体错误信息,可能是网络请求失败、权限问题或其他。
  • 检查 AndroidManifest.xml 是否需要添加额外的权限,如互联网访问权限。

5. 示例项目结构

确保你的项目结构清晰,依赖正确安装,特别是针对 Android 平台的配置。

由于无法直接获取具体的报错信息,上述代码和步骤提供了一个基本的集成框架。根据实际的报错信息,你可能需要进一步调整配置或代码。

回到顶部