如何将番茄钟案例从HTML网页改为Vue组件形式并解决音频播放问题

我原本以为，把那个用 vue 库和 .html 格式做的番茄钟案例转换成 .vue 组件，应该很简单。然而，实际情况并非如此，遇到了不少难题。费了整整半天时间才搞定，感觉既无奈又挺兴奋的。接下来，我会详细讲述改造过程中遇到的各种问题。之前的例子中使用了vue库文件，并以.html网页的形式展示，功能完备。但现在，我打算将其改为.vue组件形式。在原案例中，倒计时结束时的音频播放正常，但到了 App.vue 组件中，piano.mp3 这个音频文件却无法播放。

我原本以为，把那个用 vue 库和 .html 格式做的番茄钟案例转换成 .vue 组件，应该很简单。然而，实际情况并非如此，遇到了不少难题。费了整整半天时间才搞定，感觉既无奈又挺兴奋的。接下来，我会详细讲述改造过程中遇到的各种问题。

番茄钟案例基础

番茄钟的例子与番茄学习法相联，采用25分钟作为计时标准。我之前有分享过倒计时示例，但一旦时间归零便自动停止，没有铃声提示。这次的案例在倒计时结束后会播放音乐。之前的例子中使用了vue库文件，并以.html网页的形式展示，功能完备。但现在，我打算将其改为.vue组件形式。由于我对组合式组件不太熟悉，因此选择了选项式组件。

npm create vite@latest

初期改造困境

<audio src="./assets/piano.mp3"  id="audio" loop>
audio>

本以为事情会很简单，结果音频播放出了故障，耗费了整整半天时间。在原案例中，倒计时结束时的音频播放正常，但到了 App.vue 组件中，piano.mp3 这个音频文件却无法播放。原案例在 .js 文件中定义了类，现在要将 .html 页面的代码转换到 .vue 组件中，音频标签的处理成了一个棘手的问题。我为音频元素添加了ref属性，移除了id属性，并通过this.$refs来引用音频，觉得这样替换是等效的。但运行后发现，音乐并没有播放。

const audio = document.getElementById('audio');
const tomato = new Tomato(audio);
const app = Vue.createApp({
      data() {
        return {
          tomato: tomato,
          editTime: 25,
        }
      },
      ...
    }).mount('#app')

音频播放问题解决

<audio src="./assets/piano.mp3"  ref="audioPlayer" loop >
audio>

经过多次寻找，我发现data()阶段的组件结构并未显示，而且this.$refs引用无效。这让我陷入了困境。突然，我灵机一动，添加了一个钩子函数，重新进行了赋值。结果，音乐竟然正常播放了！那一刻，我心里的石头终于落下了，差点高兴得跳起来。这种感觉就像在黑暗中寻找钥匙，突然找到了开关，灯光一亮，一切变得清晰可见。

const app =Vue.createApp({
      data() {
        return {
          tomato: new Tomato(this.$refs.audioPlayer),
          editTime: 25,
        }
      },
      ...
    }).mount('#app')

打包后网页空白问题

程序运行顺利，于是我用npm run build命令进行打包。然而，打包后的网页却全是一片空白。幸运的是，我之前遇到过类似的问题。只需调整vue..js文件，添加一些内容，网页的空白问题就能轻松解决。接着，我测试了倒计时、开始、暂停、停止和编辑等功能，一切运作正常，这让我松了一口气。

const app =Vue.createApp({
      data() {
        return {
          tomato: new Tomato(),  //去掉参数 this.$refs.audioPlayer
          editTime: 25,
        }
      },
      mounted(){
        this.tomato=new Tomato(this.$refs.audioPlayer） //挂载后tomato再赋值
      },
      ...
    }).mount('#app')

音频打包问题

检查了打包后的dist文件夹，里面没有.mp3文件，所以这音频无法播放。网上有很多说法，有的建议安装file-，有的提出要配置vue..js文件和设置规则。我觉得这些方法都有一定道理，但我逐一尝试后，问题依旧没有解决，当时的心情急得就像热锅上的蚂蚁一样。摸索一番后，我在“建子”文件夹下的mp3子目录中存放了音频文件。接着，我调整了audio标签中的src路径。这样一来，音频文件终于被成功打包，具备了播放功能。

base: './',

完整代码与注意事项

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
  plugins: [vue()],
  base: './',     //此行必须设置，不然显示为空白
})