PeachBlog

Peach

Peach

即使被迫带上荆棘之冠👑

Rowlet_826 peach826#26510 Sw-2892-8205-7702 peach@peach826.cn
Nuxt 使用音乐播放器vue-aplayer    

由于Nuxt的服务器端渲染特性,在使用vue-aplayer出现了麻烦。经过本业余前端研究后得到以下解决办法。


1.首先安装vue-aplayer

$ npm i vue-aplayer


①plugins文件夹下新建music.js


import Aplayer from "vue-aplayer";
import Vue from 'vue';

Vue.component(Aplayer);


②在nuxt.config.js的plugins:[]中添加

{src:'@/plugins/v-scroll', mode: 'client'}


③在default.vue中加入播放器插件

<client-only>
  <aplayer
    style="margin:  0px;"
    autoplay
    repeat="repeat-all"
    theme="#41b883"
    :music="music"
    :list="musicInfo"
    showLrc="ture"
    :key="music_key"
  >

  </aplayer>

</client-only>


最终效果:

Links: Rainy的小站🌸

节假日倒计时 sitemap

京ICP备19011103号-1       PowerBy:

Copyright © by Peach All Rights Reserved.

Blog公告
温馨提醒:当前为测试阶段

项目为测试阶段,bug提交

邮件:peach@peach826.cn