解决nuxt3生产打包以后运行服务器报错: BScroll.use is not a function

现象:

 这个问题在开发环境不存在,但是在打包后的生产环境就会有这个问题

原因分析:从表象上看是better-scoll组件库编译似乎有问题,但真正的原因是better-scroll所依赖的dom元素对象不存在, 这样就导致找不到它对应的api,或者说api失效(它自身都不存在,哪来的api),这样就会报错: xxx not a function

因为ssr默认打包.vue组件, 但是服务端node环境并没有document对象

为什么我能这么推断呢,简单走读下面的better-scroll源码就会发现: better-scroll最终必然会依赖原生的dom对象,也就是需要浏览器环境

 

 那为什么开发环境没有这个问题,而生产环境才有这个问题呢,我猜想这可能跟nuxt3的打包机制有关系,因为BScroll.use实际出现在几个.ts文件,而ts文件默认不会打包到服务端(ssr默认只打包vue组件和css文件),而是一般会打包到浏览器客户端。

但是,可能nuxt生产环境的打包机制就不是这样: 它可能也会把部分ts文件也打包到了ssr环境,

如果一旦ts文件有第三方库依赖dom对象,那么这个库的对象就会无法生效,从而它的api也会失效,最后报错: xxx not a function

 最后来谈谈解决办法: 

根据报错指引的关键字,通过vscode的全局搜索功能,找到引用到该关键字的所有ts文件,然后

通过if(process.client) 判断去执行该代码。也就是保证它不要打包到ssr服务端!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/277363.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【Java 集合】ConcurrentLinkedQueue

在日常中, 我们用到的数据结构有很多: 数组, 链表, 树等, 而在这些结构中, 还有一个叫做队列的存在。 和其他的集合相同, Java 原生提供了不同的实现。 而如果我们需要一个线程安全的队列的话, 可以基于实际的场景进行选择, 比如基于数组实现同时操作上会阻塞的 ArrayBlockingQ…

Domino万物可订阅

大家好,才是真的好。 如果你还不知道什么是RSS,从V站截图一份放到这里供大家参考: 其实,Domino上也可以很简单地发布RSS站点,以供内部或外部用户订阅。 前面其实我们说了不少关于Notes客户端的RSS订阅功能&#xff…

ipad协议限制号版

特别声明:仅供学习交流 Applet显示/隐藏显示操作展开操作 POST /api/Applet/GetRandomAvatar 提取一个随机昵称和照片 POST /api/Applet/UploadAvatarImg 上传小程序身份照片 POST /api/Applet/AddAvatar 增加一个小程序身份 POST /api/Applet/OauthSdkApp 授权A…

猫粮哪个牌子质量好性价比高?分享十款主食冻干猫粮品牌排行榜!

一款好的、健康的主粮对猫整体有很大的提升,主食作为猫的日常饮食,直接关乎着小猫是否能摄入充分的营养,达到最佳的理想状态,因此对于每一位铲屎官来说,主食选得好不好至关重要。面对种类众多的主食,很多人…

最大子数组和java实现【动态规划基础练习】

12.15 最大子数组和 给你一个整数数组 nums ,请你找出一个具有最大和的连续子数组(子数组最少包含一个元素),返回其最大和。 子数组 是数组中的一个连续部分。 示例 1: 输入:nums [-2,1,-3,4,-1,2,1,-5,4]…

优先考虑泛型

Java中的泛型(Generics)提供了一种参数化类型的机制,使得你可以编写更灵活、类型安全的代码。下面是一个例子,说明在Java中优先考虑泛型的好处: 考虑一个简单的容器类,它可以存储任意类型的元素&#xff0…

《opencv实用探索·十九》光流法检测运动目标

前言 光流法(Optical Flow)是计算机视觉中的一种技术,用于估计图像中相邻帧之间的像素位移或运动。它是一种用于追踪图像中物体运动的技术,可以在视频中检测并测量物体的运动轨迹。 光流的直观理解: 光流是一个视频中两…

Springboot集成支付宝支付---完整详细步骤

网页操作步骤 1.进入支付宝开发平台—沙箱环境 使用开发者账号登录开放平台控制平台 2.点击沙箱进入沙箱环境 说明:沙箱环境支持的产品,可以在沙箱控制台 沙箱应用 > 产品列表 中查看。 3.进入沙箱,配置接口加签方式 在沙箱进行调试前…

电影《旺卡》观后感

上周看了电影《旺卡》,这部电影可是说是非常好,非常值得去观看,看影片简绍,主角是之前《查理与巧克力工厂》的主人公扮演的。如果说有谁能在现实中造梦想的话,那么自己认为至少在就近的一段时间里,这部影片…

吉林省文旅厅联合高德地图上线自驾游精品线路指南

12月15日消息,今日,吉林省文化和旅游厅联合高德地图推出“吉林省自驾游精品线路指南”,依托全省冬夏两季特色资源,推出了基于位置的8条自驾游品牌路线、百余个吉林省重点旅游场景,游客可以根据季节、地理位置、资源类型…

NPM开发工具的简介和使用方法及代码示例

NPM(Node Package Manager)是Node.js的包管理工具,用于管理和共享被发布到模块仓库的JavaScript代码。本文将介绍NPM的定义、使用方法、代码示例以及总结。 一、NPM的定义 NPM是Node.js的默认包管理工具,它的功能包括安装、管理、…

Pytest自动化测试用例中的断言详解

前言 测试的主要工作目标就是验证实际结果与预期结果是否一致;在接口自动化测试中,通过断言来实现这一目标。Pytest中断言是通过assert语句实现的(pytest对Python原生的assert语句进行了优化),确定实际情况是否与预期一…