uni-app uni-admin vue3编译时 audiu标签报错

开发环境	版本号	项目创建方式
Windows	win11	HBuilderX

产品分类：uniapp/H5

PC开发环境操作系统：Windows

浏览器平台：Chrome

浏览器版本：99.0.4844.84（正式版本）

操作步骤：

进入网站下载uniadmin框架：https://ext.dcloud.net.cn/plugin?id=3268
manifest.json中修改vue版本选择 3
运行到谷歌浏览器
在打开的页面新增audio标签
刷新页面报错

预期结果：

页面显示正常

实际结果：

页面报错：提示

[plugin:vite:import-analysis] Cannot find module '[@dcloudio](/user/dcloudio)/uni-components/style/audio.css'
Require stack:
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\resolve.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\json\mp\jsonFile.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\mp\usingComponents.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\mp\index.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\index.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\vite-plugin-uni\dist\cli\utils.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\vite-plugin-uni\dist\cli\index.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\vite-plugin-uni\bin\uni.js

uniadmin使用vue3版本编译使用audio标签报错

页面报错：提示

[plugin:vite:import-analysis] Cannot find module '[@dcloudio](/user/dcloudio)/uni-components/style/audio.css'
Require stack:
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\resolve.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\json\mp\jsonFile.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\mp\usingComponents.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\mp\index.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\uni-cli-shared\dist\index.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\vite-plugin-uni\dist\cli\utils.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\vite-plugin-uni\dist\cli\index.js
- D:\anzhuang\HBuilderX\plugins\uniapp-cli-vite\node_modules\[@dcloudio](/user/dcloudio)\vite-plugin-uni\bin\uni.js

sinazl 1楼•16 天前

audio组件很久前已不再维护，建议使用能力更强的uni.createInnerAudioContext()，详见文档

gougou168 2楼•16 天前

在使用 uni-app 和 uni-admin 进行开发时，如果你在 Vue 3 环境下使用 <audio> 标签时遇到编译错误，可能是由于以下几个原因导致的。以下是一些常见的解决方案：

1. 检查 Vue 3 的兼容性

uni-app 在 Vue 3 环境下对某些 HTML 标签的支持可能有所不同。确保你使用的 <audio> 标签在 Vue 3 中是兼容的。

2. 使用 `uni-audio` 组件

uni-app 提供了 uni-audio 组件来替代原生的 <audio> 标签。uni-audio 组件在跨平台兼容性上表现更好，建议使用它来替代 <audio> 标签。

<template>
  <uni-audio :src="audioSrc" controls></uni-audio>
</template>

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

3. 检查编译配置

确保你的 vue.config.js 或 vite.config.js 配置正确，没有遗漏或错误的配置项。特别是如果你使用了自定义的 Webpack 或 Vite 配置，可能需要检查是否有影响 <audio> 标签的配置。

4. 检查依赖版本

确保你使用的 uni-app 和 uni-admin 版本是最新的，或者至少是兼容 Vue 3 的版本。有时，旧版本可能存在一些兼容性问题。

5. 错误信息分析

查看具体的编译错误信息，通常错误信息会提示你问题的根源。根据错误信息进行针对性的解决。

6. 使用 `ref` 和 `onMounted`

如果你需要在 Vue 3 中使用原生的 <audio> 标签，可以尝试使用 ref 和 onMounted 来确保 DOM 元素已经加载完成。

<template>
  <audio ref="audioPlayer" :src="audioSrc" controls></audio>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const audioPlayer = ref(null);
    const audioSrc = 'https://example.com/audio.mp3';

    onMounted(() => {
      if (audioPlayer.value) {
        audioPlayer.value.play();
      }
    });

    return {
      audioPlayer,
      audioSrc
    };
  }
};
</script>

7. 检查浏览器兼容性

如果你在开发环境中使用的是浏览器，确保浏览器支持 <audio> 标签。某些浏览器可能对 <audio> 标签的支持不完全。

8. 使用 `@vue/compat` 模式

如果你是从 Vue 2 迁移到 Vue 3，可以尝试使用 @vue/compat 模式来逐步迁移，这可能会解决一些兼容性问题。

import { createApp } from 'vue';
import App from './App.vue';

const app = createApp(App);
app.config.isCustomElement = tag => tag === 'audio';
app.mount('#app');