宝塔面板搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)

2019年12月22日16:01:54宝塔面板17929,784字数 1846阅读模式

2020.05.18更新:最新版本的安装还是用这个方法,不过大鸟博客编译了改程序的静态文件,所以你只要上传静态文件到自己的网站根目录即可访问,省心方便。在第八步中可以看到具体内容。

2019.12.13更新:vue-netease-music的设置域名访问的方法,第七步中看可以看到。并且新增了演示地址。

基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC) Online Music Player,据说是用 vue 全家桶模仿 mac 客户端的 ui 实现了一个,颜值确实不错。

这篇文章,我们就来说说如何利用宝塔面板实现这个高仿网易云mac客户端播放器(PC)。额,安装这个需要一台VPS,并且安装好宝塔面板。具体步骤如下。

具体的部署和安装


前言:

项目地址:https://github.com/sl1673495/vue-netease-music

演示:https://music.sl1673495.now.sh

简介:

  • Vue 全家桶 Vue-CLI3 create 出来的。
  • ui 库用了魔改样式的 element-ui
  • 歌词滚动部分用了黄轶老大的 better-scroll(贼爽)
  • 主题换肤用的 css 变量替换。
  • ES 6 / 7 (JavaScript 语言的下一代标准)
  • Sass(CSS 预处理器)
  • postcss-pxtorem(自动处理 rem,妈妈再也不用担心屏幕太大太小了)

1、环境配置

宝塔面板:这个自己安装好,目前最新版本是7.0.3

PM2管理器 4.2.2:node.js管理器,内置 node.js + npm + nvm + pm2.!

宝塔面板搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)

2、安装模块

安装PM2管理器之后,我们需要安装几个模块,‘PM2管理器’→‘模块管理’需要安装3个模块:vue、vue-cli、cnpm,具体安装如图:

宝塔面板搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)

注意:

输入模块,点击安装即可,全部安装好如上图。

3、安装程序

3.1安装screen


因为需要在后台运行程序,所以这里就通过screen来运行,如果你安装过了可以无视,没安装的命令如下:

yum install screen

3.2安装程序


我们在screen下面进行安装,命令如下:

此处为隐藏的内容
发表评论并刷新,方可查看
等待安装结束即可,最后安装成功的截图如下:

宝塔面板搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)

注意:

  1. Local: http://localhost:8888/
  2. Network:你服务器ip:8888    浏览器中需要用这个地址才能打开。

4、效果

效果确实不错,截图如下:


宝塔面板搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)

5、登录

vue-netease-music是支持在线登录的,如下:

  1. 请 点我(http://music.163.com)打开网易云音乐官网
  2. 点击页面右上角的“登录”
  3. 点击您的头像,进入我的主页
  4. 复制浏览器地址栏 /user/home?id= 后面的数字(网易云 UID)

6、设置域名访问

如果不能用域名去访问中感觉美中不足,所以这个播放器,我们还是需要用域名来访问,具体如何操作,还是一样,宝塔面板中新建网站,设置好域名访问。之后再‘网站设置’→‘方向代理’中设置,具体看图:

宝塔面板搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)

7、Invalid-Host-header

当让这样你用域名打开之后还是不能访问,浏览器会显示‘Invalid Host header’错误,如何修改?我们找到文件夹‘vue-netease-music’→‘vue.config.js’,编辑‘vue.config.js’这个文件,然后在第五行也就是‘devServer: {’下面添加一行代码,如下:

输入验证码查看隐藏内容

扫描二维码关注本站微信公众号 大鸟博客
或者在微信里搜索 大鸟博客
回复 我要看看 获取验证码
wechat 大鸟博客
不会就看截图吧。

宝塔面板搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)

浏览器刷新,发现已经可以打开访问了,问题解决。

8、开箱即食

编译了静态文件,宝塔面板用户只要新建一个网站,然后上传静态文件到自己的网站根目录即可访问,开箱即食。下载地址如下:

此处为隐藏的内容
发表评论并刷新,方可查看

9、最后

用宝塔面板安装貌似会更简单一点,当然你用别的linux环境安装也是可以的,还可以在本地电脑安装,有空试试。推荐用国内的VPS安装,这样打开速度会快一点。

设置域名访问,稍微麻烦点,具体就根据教程来设置吧。不过已经编译了打包了该程序,目前只需要上传静态文件即可使用。

weinxin
微信公众号
关注大鸟博客公众号
大鸟
宝塔面板docker安装umami 宝塔面板

宝塔面板docker安装umami

umami是个小巧好用的第三方统计站点程序,之前也介绍过umami的其他安装方法,这篇文章我们还是用宝塔面板来安装,不过这次的安装是用docker来安装该程序。宝塔服务器面板,一键全能部署及管理,送你...
评论  179  访客  177  作者  2
    • 2676515928
      2676515928 1

      真的好

      • ok
        ok 0

        博主,这个真的漂亮,想看看

        • 匿名网友
          匿名网友 0

          看看隐藏部分

          • 小草林
            小草林 0

            想看看隐藏部分 :razz:

            • 碎念
              碎念 0

              好哇好哇好哇

              • 码云
                码云 0

                牛蛙牛

                • scu
                  scu 0

                  真的绝了 找了半天

                  • mizhi
                    mizhi 4

                    来看看

                    • mizhi
                      mizhi 4

                      来看看卡卡卡

                      • mizhi
                        mizhi 4

                        评论没用吗??

                        • 学徒图
                          学徒图 1

                          真的厉害,蟹蟹陋之

                          • 学徒图
                            学徒图 1

                            为啥发表了评论刷新不能看呀

                            • luoyu
                              luoyu 1

                              这个很好 很好用

                              • agreatly
                                agreatly 0

                                还不错啊这个

                                • 17
                                  17 0

                                  看看隐藏部分

                                  • Alpha
                                    Alpha 2

                                    还不错啊这个

                                    • mmsnh
                                      mmsnh 1

                                      这个很好 很好用

                                    匿名

                                    发表评论

                                    匿名网友

                                    :?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

                                    确定