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

2019年12月22日 11 1,689 1614字阅读5分22秒

2019.12.13更新vue-netease-music的设置域名访问的方法,在‘8’中看可以看到。并且新增了演示地址。

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

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

具体的部署和安装


前言:

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

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

演示:https://fu.dayu.tk/

简介:

  • 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)

 


宝塔面板搭建基于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: {’下面添加一行代码,如下:

输入验证码查看隐藏内容:

扫描二维码关注本站微信公众号 大鸟博客
或者在微信里搜索 大鸟博客
回复 我要看看 获取验证码
宝塔面板搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC) 大鸟博客
不会就看截图吧。

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

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

8、最后

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

设置域名访问,稍微麻烦点,具体就根据教程来设置吧。

  • 我的微信
  • 分享宝塔面板建站技术交流等!
  • weinxin
  • 微信公众号
  • 关注本博公众号
  • weinxin
  • 文本由 发表于 2019年12月22日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友

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

评论:11   其中:访客  9   博主  2
    • avatar 原谅糖 @回复 2

      来看看

      • avatar 张波博客 @回复 4

        原来玩这个的好多呀,我以为就那一两个项目呢

          • avatar 大鸟 Admin @回复

            @张波博客 这个真的很不错,我已经用上了。

          • avatar Tianya @回复 2

            来看看,这几天在研究

            • avatar 單純 @回复 0

              感觉有点难

              • avatar 辛勤的蜜蜂 @回复 1

                感谢dalao分享啊

                • avatar 辛勤的蜜蜂 @回复 1

                  还要评论两次吗

                  • avatar 辛勤的蜜蜂 @回复 1

                    评论刷新了还是看不到呀

                    • avatar 小陈先生 @回复 4

                      来看看

                      • avatar 小蟋蟀 @回复 0

                        沙发,过来学习一下