uniapp vue 引入jessibuca.js 直播流播放器 [Vue warn]: Error in mounted hook: “ReferenceError: Jessibuca is no
问题描述：
[Vue warn]: Error in mounted hook: "TypeError: Cannot read property 'Jessibuca' of undefined"
[Vue warn]: Error in mounted hook: "ReferenceError: Jessibuca is not defined"
"ReferenceError: Jessibuca is not defined"，这通常意味着在Vue组件尝试使用Jessibuca时，这个变量还没有被正确加载或定义。
在uniapp中遇到这个错误，通常意味着在组件的
mounted生命周期钩子中尝试访问未定义（undefined）的Jessibuca属性。这很可能与 Jessibuca 播放器库的加载、初始化方式或 Vue 上下文有关。
常见根本原因：脚本未加载、加载顺序错误、路径不正确、或是在 Vue 的响应式系统中错误地处理了全局对象。
可能的原因和解决方案：
1.首先是Jessibuca库的引入问题。由于它不是npm包，所以需要直接在index.html中使用script标签引入。用户需要确保script标签的路径正确，并且放置在Vue应用初始化之前。
有时候路径问题会导致加载失败，特别是在生产环境部署时，可能需要调整decoder参数的路径配置。
2.其次是加载顺序的问题。Vue可能会在Jessibuca完全加载之前就执行mounted钩子中的代码。因此需要确保Jessibuca的script标签在Vue之前引入，或者使用defer、async等属性来控制加载顺序。
3.另外，Jessibuca的实例化方式也需要特别注意。在Vue中，不应该将实例直接绑定到data属性中，因为Vue会尝试代理这些属性，可能导致冲突。建议将实例绑定到Vue原型上、组件实例的$options上，或者使用_或$开头的变量名。
4.还有可能是浏览器兼容性或资源加载问题。Jessibuca依赖WASM文件，需要确保decoder.js和decoder.wasm文件的路径正确。在某些浏览器环境下，可能需要额外的配置。
背景：
vue3项目即web端，放置在public文件夹：
vue2没有public文件夹，放置在static文件夹
web端引入jessibuca.js：
uniapp引入：
问题分析
这个问题核心在于 Jessibuca 对象在你的 Vue 组件实例中未被正确识别或访问。可能的原因和解决思路可以概括如下：
| 可能原因 | 解决思路 |
|---|---|
| Jessibuca 库未正确加载 | 确保 Jessibuca 的 JS 文件在依赖它执行的代码之前已被成功引入。 |
| Vue 上下文中未正确访问 Jessibuca | 检查 Jessibuca 的挂载位置（如 window 对象），并在 Vue 中确保能访问到该全局变量。 |
| 初始化时机问题 | 确保在 mounted 或后续生命周期钩子中，DOM 已准备就绪且 Jessibuca 库已加载完成后再初始化。 |
| UniApp 环境兼容性 | 注意 UniApp 环境可能带来的差异，如路径问题、ESLint 检查或 HBuilderX 版本问题。 |
下面我们详细看看如何解决。
解决办法
确保 Jessibuca 库正确加载
Jessibuca 通常需要通过 script 标签在 index.html 或模板文件中全局引入 ，而不是通过 import 直接导入。
-
检查引入路径和位置：确保
jessibuca.js等相关文件的引入路径正确，并且在所有 Vue 组件之前被加载。例如，在index.html的<head>或<body>顶部添加：
<script src="./path/to/jessibuca.js"></script>
例如：
<!-- 引入 Jessibuca -->
<!-- <%= BASE_URL %> 是 Vue CLI 提供的变量，指向 public 目录，确保路径正确。 -->
<script type="text/javascript" src="/static/js/jessibuca/jessibuca.js"></script>
<script src="<%= BASE_URL %>static/js/jessibuca/jessibuca.js"></script>
<script src="<%= BASE_URL %>static/jessibuca.js"></script>
如果资源放在 static 或 public 目录，路径可能是 "/static/jessibuca.js"。
-
使用 UniApp 的
vue-cli-plugin-jessibuca：有资料提到可以使用vue-cli-plugin-jessibuca插件来帮助自动引入 Jessibuca 。你可以尝试安装并配置此插件：【不适配Android】
npm install vue-cli-plugin-jessibuca -D
或
yarn add vue-cli-plugin-jessibuca -D
安装后，你可能需要在 vue.config.js 或项目配置中进行相应设置。安装插件后，通常可以直接使用 new window.Jessibuca(options) 进行初始化 。
-
检查网络请求：打开浏览器开发者工具的“网络”(Network) 面板，刷新页面，确认
jessibuca.js文件是否被成功加载（状态码应为 200）。如果加载失败，检查控制台是否有相关的资源加载错误信息。
写到这儿。。。uniapp引入Jessibuca的问题没有解决
Agent 垂直技术社区，欢迎活跃、内容共建。
更多推荐
28
0- 0
已为社区贡献5条内容
所有评论(0)