当前位置:首页 > javascript > vue > 正文内容

uniapp vue3 打包h5后无法正常正常使用uni对象中的方法

hxing6411年前 (2023-12-29)vue2696

今天uniapp项目遇到一个小问题,记录下,就是打包h5后放到服务器跑,一直报错:uni.navigator  is  not  defined

以下是我的代码:

to(url, type = 'navigateTo') {
   uni[type]({
        url
    })
}

以上是我封装的跳转路由方法,在开发环境跑没问题,打包成h5后,就会报错uni[t] is  not  defined

原因是在vue3中,uni对象中的方法,打包后不会被存在uni对象中,也就是打包后uni对象为空,所以我们不能使用 uni对象 动态去使用它的属性

解决方案:

to(url, type = 'navigateTo') {
    if (type === 'navigateTo') {
      uni.navigateTo({
        url
      })
    } else if (type === 'redirectTo') {
      uni.redirectTo({
        url
      })
    } else if (type === 'reLaunch') {
        uni.reLaunch({
            url
        })
    } else if (type === 'switchTab') {
        uni.switchTab({
            url
        })
        }
}


小小记录下

扫描二维码推送至手机访问。

版权声明:本文由星星博客发布,如需转载请注明出处。

本文链接:https://xingxinghan.cn/?id=490

分享给朋友:

“uniapp vue3 打包h5后无法正常正常使用uni对象中的方法” 的相关文章

vue3 setup方法执行原理

Vue 3中的setup函数是在组件实例创建之前调用的一个特殊函数,它主要用于配置组件的状态和行为。下面是setup函数的执行原理的分析:在组件定义中,通过setup属性指定一个函数,例如:export default {     &nb...

uniapp h5设置代理解决跨域问题

在manifest.json文件中 h5 属性中加入如下代码:"h5": {     "devServer": {       &nbs...

UniApp H5项目指南:处理二维码生成和扫描操作

UniApp H5项目指南:处理二维码生成和扫描操作

在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作。二维码的生成,使用了JS文件weapp-qrcode.js进行处理,而二维码扫码则是基于一个第三方组件的方式进行支持的,最后通过统一入...

【Vue】详解Vue组件系统

Vue是一款流行的JavaScript框架,它的组件系统是它最重要的特性之一。Vue组件系统允许开发人员将UI界面划分成独立、可重复使用的组件,从而提高代码的可维护性和可重用性。本文将详细介绍Vue组件系统的各个方面。组件的定义在Vue中,一个组件是由一个Vue实例构成的。组件通常包含一个模板、一个...

【Vue】深入探究Vue生命周期

Vue.js 是一款流行的前端框架,广泛应用于各种 Web 应用开发中。在 Vue.js 中,每个组件都有一个生命周期,它包括一系列钩子函数,用于在特定阶段执行特定的操作。本文将详细介绍 Vue 组件生命周期,并讲述它们的实际应用。生命周期钩子函数Vue 组件的生命周期分成了 8 个不同的阶段,每个...

深入探索Vue自定义过滤器

Vue.js是一种流行的JavaScript框架,提供了很多有用的功能来构建交互式的Web应用程序。其中一个非常有用且经常被忽视的功能是自定义过滤器。通过使用自定义过滤器,我们可以在Vue应用程序中轻松地转换、格式化和处理数据。本文将深入探索Vue自定义过滤器的使用方法和实际应用。一、什么是Vue自...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。