uni-app audio组件在H5端报css错误

uni-app audio组件在H5端报css错误

类别 信息
产品分类 uniapp/App
PC开发环境 Mac
PC系统版本 MacOS Sonoma 14.4.1
HBuilderX类型 正式
HBuilderX版本 4.08
手机系统 iOS
手机系统版本 iOS 17
手机厂商 模拟器
手机机型 Iphone6
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码：

<audio src=""></audio>

操作步骤：

  • 只要引入audio标签就会报错

预期结果：

  • 无报错

实际结果：

  • 报错

bug描述：

Cannot find module '[@dcloudio](/user/dcloudio)/uni-components/style/audio.css'
Require stack:
- /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/[@dcloudio](/user/dcloudio)/uni-cli-shared/dist/resolve.js  
- /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/[@dcloudio](/user/dcloudio)/uni-cli-shared/dist/hbx/env.js  
- /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/[@dcloudio](/user/dcloudio)/uni-cli-shared/dist/hbx/index.js  
- /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/[@dcloudio](/user/dcloudio)/uni-cli-shared/dist/utils.js  
- /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/[@dcloudio](/user/dcloudio)/uni-cli-shared/dist/mp/ast.js  
- /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/[@dcloudio](/user/dcloudio)/uni-cli-shared/dist/mp/index.js  
- /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/[@dcloudio](/user/dcloudio)/uni-cli-shared/dist/index.js  
- /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/[@dcloudio](/user/dcloudio)/vite-plugin-uni/dist/cli/index.js  
- /Applications/HBuilderX.app/Contents/HBuilderX/plugins/uniapp-cli-vite/node_modules/[@dcloudio](/user/dcloudio)/vite-plugin-uni/bin/uni.js

更多关于uni-app audio组件在H5端报css错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

测试了一下hello示例和新建默认模板引入audio未复现该问题，重新卸载安装一下vue3编译器插件试试

更多关于uni-app audio组件在H5端报css错误的实战教程也可以访问 https://www.itying.com/category-93-b0.html


一样的问题，用的是uniappx，手册中确实没有对应audio

遇到同样的问题

我用的uniapp，在h5模式就碰到同样问题： 13:16:33.749 [plugin:vite:import-analysis] Cannot find module ‘@dcloudio/uni-components/style/audio.css’ 13:16:33.751 Require stack: 13:16:33.752 - D:\software\HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\resolve.js 13:16:33.753 - D:\software\HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\hbx\env.js 13:16:33.754 - D:\software\HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\hbx\index.js 13:16:33.756 - D:\software\HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\utils.js 13:16:33.756 - D:\software\HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\mp\ast.js 13:16:33.757 - D:\software\HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\mp\index.js 13:16:33.757 - D:\software\HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\index.js 13:16:33.757 - D:\software\HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\vite-plugin-uni\dist\cli\index.js 13:16:33.758 - D:\software\HBuilderX.4.15.2024050802\HBuilderX\plugins\uniapp-cli-vite\node_modules[@dcloudio](/user/dcloudio)\vite-plugin-uni\bin\uni.js 13:16:33.758 at components/word-list-video-sound/word-list-video-sound.vue:1:0

在windows系统的chrome浏览器上报相同的错误。 在uniapp的audio文档中看到【本组件在vue3项目中废弃，只可以在vue2项目中使用】，我猜可能是这个原因吧，我现在的项目是vue3项目。

在 Uni-App 中使用 <audio> 组件时，如果在 H5 端遇到了 CSS 相关的错误，可能是由于以下原因之一导致的。以下是一些常见的排查和解决方法：

1. 样式冲突

Uni-App 的 <audio> 组件在 H5 端会渲染为原生的 HTML5 <audio> 元素。如果你在页面中定义了全局的 CSS 样式，可能会影响到 <audio> 组件的默认样式，导致布局或显示异常。

解决方法：

  • 检查是否有全局样式影响到了 <audio> 组件。
  • 使用 scoped 样式或更具体的选择器来避免样式冲突。
<style scoped>
.custom-audio {
  width: 100%;
}
</style>

<template>
  <audio class="custom-audio" src="your-audio-file.mp3"></audio>
</template>

2. Uni-App 的默认样式

Uni-App 可能会为 <audio> 组件添加一些默认样式，这些样式在 H5 端可能会导致问题。

解决方法：

  • 尝试重置 <audio> 组件的样式，或者覆盖 Uni-App 的默认样式。
audio {
  width: 100%;
  height: auto;
  display: block;
}

3. 浏览器兼容性问题

不同的浏览器对 <audio> 组件的渲染方式可能有所不同，可能会导致某些样式不兼容。

解决方法：

  • 检查是否有特定的浏览器兼容性问题。
  • 使用浏览器开发者工具检查 <audio> 元素的样式和布局，看看是否有异常。

4. Uni-App 版本问题

如果你使用的是较旧版本的 Uni-App，可能存在一些已知的 bug 或问题。

解决方法：

  • 尝试升级到最新版本的 Uni-App，看看问题是否得到解决。

5. 自定义控件样式

如果你使用了自定义的音频控件，可能需要确保这些控件的样式在 H5 端也能正确渲染。

解决方法：

  • 检查自定义控件的样式，确保它们在 H5 端也能正常工作。

6. 调试工具

使用浏览器的开发者工具（如 Chrome DevTools）来检查 <audio> 元素的样式和布局，看看是否有异常。

步骤：

  • 打开开发者工具（F12）。
  • 选择 <audio> 元素，查看其应用的样式。
  • 检查是否有样式冲突或错误的样式规则。

7. 示例代码

以下是一个简单的示例，展示如何在 Uni-App 中使用 <audio> 组件：

<template>
  <view>
    <audio :src="audioSrc" controls></audio>
  </view>
</template>

<script>
export default {
  data() {
    return {
      audioSrc: 'https://www.example.com/audio.mp3'
    };
  }
};
</script>

<style scoped>
audio {
  width: 100%;
  height: auto;
}
</style>
回到顶部