vue3动态加载音频文件，用于不同场景加载不同的文件

专业研究祖传Bug编写术

已于 2024-03-09 17:13:05 修改

阅读量2.2k

点赞数 53

分类专栏： Vue3高级应用文章标签：前端 javascript vue.js

于 2023-12-01 08:54:23 首次发布

本文链接：https://blog.csdn.net/aahwj/article/details/134722976

版权

6 篇文章 8 订阅 ¥29.90 ¥99.00

订阅专栏

本文详细介绍了在Vue3中如何通过import()函数和watch()函数实现音频文件的动态加载，以节省资源。静态加载方式可能导致所有音频文件一次性加载，而动态加载则根据需要异步导入，提高应用性能。文中还提供了使用示例，展示了如何在语言变化时动态加载对应语言的音频文件。

摘要由CSDN通过智能技术生成

在这里插入图片描述

本文主要介绍如何在vue3中动态加载音频文件。

前言

在vue3中，我们通常使用import xxx from 'xxxxxx'来加载文件，但是如果我们需要加载哪些文件，是需要条件去判断的，那该怎么做呢？

先来看看最普遍的加载方式——静态加载
假设现在我需要加载one、two、three三个音频文件，这3个音频文件分别有中文版和英文版。那么按照最简单的加载方式，我应该直接import，代码如下：

import one_cn from './assets/sounds/cn/one.mp3'
import two_cn from './assets/sounds/cn/two.mp3'
import three_cn

了解本专栏

关注

专栏目录