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

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.!

2、安装模块

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

注意：

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

3、安装程序

3.1安装screen

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

yum install screen

3.2安装程序

我们在screen下面进行安装，命令如下：

注意：

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

4、效果

效果确实不错，截图如下：

5、登录

vue-netease-music是支持在线登录的，如下：

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

6、设置域名访问

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

7、Invalid-Host-header

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

输入验证码查看隐藏内容

扫描二维码关注本站微信公众号 大鸟博客

或者在微信里搜索 大鸟博客

回复 我要看看 获取验证码

大鸟博客

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

8、开箱即食

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

9、最后

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

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