宝塔面板搭建基于Vue2、Vue-CLI3的高仿网易云mac客户端播放器(PC)云服务器怎么样?云服务器值不值得购买?云服务器好不好?
2020.05.18更新：最新版本的安装还是用这个方法，不过VPS主机评测博客编译了改程序的静态文件，所以你只要上传静态文件到自己的网站根即可访问，省心方便。在第八步中可以看到具体内容。
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下面进行安装，命令如下：
此处为隐藏的内容！
发表评论并刷新，方可查看
发表评论 等待安装结束即可，最后安装成功的截图如下：
注意：
- Local: http://localhost:8888/
- Network：你服务器ip:8888 浏览器中需要用这个地址才能打开。
4、效果
效果确实不错，截图如下：
5、登录
vue-netease-music是支持在线登录的，如下：
- 请 点我(http://music.163.com)打开网易云音乐官网
- 点击页面右上角的“登录”
- 点击您的头像，进入我的主页
- 复制浏览器地址栏 /user/home?id= 后面的数字（网易云 UID）
6、设置域名访问
如果不能用域名去访问中感觉美中不足，所以这个播放器，我们还是需要用域名来访问，具体如何操作，还是一样，宝塔面板中新建网站，设置好域名访问。之后再‘网站设置’→‘方向代理’中设置，具体看图：
7、Invalid-Host-header
当让这样你用域名打开之后还是不能访问，浏览器会显示‘Invalid Host header’错误，如何修改？我们找到文件夹‘vue-netease-music’→‘vue.config.js’，编辑‘vue.config.js’这个文件，然后在第五行也就是‘devServer: {’下面添加一行代码，如下：
输入验证码查看隐藏内容：
扫描二维码关注本站微信公众号
VPS主机评测博客 或者在微信里搜索
VPS主机评测博客 回复
我要看看 获取验证码
VPS主机评测博客 不会就看截图吧。
浏览器刷新，发现已经可以打开访问了，问题解决。
8、开箱即食
编译了静态文件，宝塔面板用户只要新建一个网站，然后上传静态文件到自己的网站根即可访问，开箱即食。下载地址如下：
此处为隐藏的内容！
发表评论并刷新，方可查看
发表评论
9、最后
用宝塔面板安装貌似会更简单一点，当然你用别的linux环境安装也是可以的，还可以在本地电脑安装，有空试试。推荐用国内的VPS安装，这样打开速度会快一点。
设置域名访问，稍微麻烦点，具体就根据教程来设置吧。不过已经编译了打包了该程序，目前只需要上传静态文件即可使用。
- 前言：
- 1、环境配置
- 2、安装模块
- 4、效果
- 5、登录
- 6、设置域名访问
- 7、Invalid-Host-header
- 8、开箱即食
- 9、最后
来源链接：https://www.vpssz.com/
本站声明:网站内容来源于网络,如有侵权,请联系我们,我们将及时处理。
郑重声明:VPS主机评测仅提供资料收集及VPS云主机信息推介，不提供任何VPS云主机及代购业务！
