uni-app转vue3过程中 flyio小程序可用 h5无法启动

uni-app转vue3过程中 flyio小程序可用 h5无法启动

操作步骤：

  • 运行-》运行到内置浏览器

预期结果：

  • flyio在h5正常使用

实际结果：

  • Failed to resolve import “flyio/dist/npm/wx” from “E:\gitee\th_brxc\assets\api\index.js”. Does the file exist?

bug描述：

  • uniapp转vue3，flyio小程序可以使用，h5无法启动

附件

image image

信息类别 详情
产品分类 uniapp/H5
PC开发环境 Windows
PC开发环境版本 win10
HBuilderX类型 正式
HBuilderX版本 3.2.12
浏览器平台 Chrome
项目创建方式 HBuilderX

更多关于uni-app转vue3过程中 flyio小程序可用 h5无法启动的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app转vue3过程中 flyio小程序可用 h5无法启动的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个问题是由于在uni-app的Vue3项目中，flyio的导入路径在不同平台下不兼容导致的。flyio默认会根据uni-app的运行环境自动选择适配器，但在Vue3项目中可能需要手动处理平台差异。

问题分析：

  1. 在H5环境下，flyio尝试导入flyio/dist/npm/wx模块，这是微信小程序专用的适配器
  2. H5环境应该使用flyio/dist/npm/fly或flyio/dist/npm/h5适配器
  3. Vue3的构建工具对模块解析更加严格，导致路径解析失败

解决方案：

方案一：使用条件编译（推荐）

// api/index.js
let fly
// #ifdef H5
fly = require('flyio/dist/npm/fly')
// #endif
// #ifdef MP-WEIXIN
fly = require('flyio/dist/npm/wx')
// #endif
// #ifdef APP-PLUS
fly = require('flyio/dist/npm/ap')
// #endif

const request = new fly()
export default request

方案二：使用uni-app的uni.request替代 考虑到uni-app已经提供了统一的网络请求API，建议直接使用：

uni.request({
    url: 'https://example.com/api',
    success: (res) => {
        console.log(res.data)
    }
})

方案三：配置别名（webpack方案） 在vue.config.js中配置：

const path = require('path')

module.exports = {
    configureWebpack: {
        resolve: {
            alias: {
                'flyio/dist/npm/wx': path.resolve(__dirname, 'node_modules/flyio/dist/npm/fly')
            }
        }
    }
}

方案四：使用环境变量判断

import Fly from 'flyio'

let adapter
if (process.env.UNI_PLATFORM === 'h5') {
    adapter = require('flyio/dist/npm/fly')
} else if (process.env.UNI_PLATFORM === 'mp-weixin') {
    adapter = require('flyio/dist/npm/wx')
}

const fly = new Fly()
if (adapter) {
    fly.config.adapter = adapter
}
回到顶部