前言

　　最近做完了一个项目，Vue.js 2.0 + vuex + axios，还是有点大的。想着做了这么久，放服务器给朋友们体验一下，帮忙找找BUG，于是就有了研究服务器这一篇文章了。

准备工作

服务器

既然是部署到服务器，肯定是需要一个云的。我这里找基友拿的一个，做测试的话，可以买阿里云的学生机，9.9 一个月，不过不是学生的话就比较麻烦，因为涉及敏感操作都需要验证码。

编译打包

将项目打包成 dist 文件，这里我需要跨域请求一些数据，还写了一个小型服务器， app.js 放到 dist 文件夹 同级目录。

Xshell

因为基友的是 centos 的服务器，所以用 xshell 的话稍微好操作一点，我是 win10。

WinSCP

接触命令行并不多，所以面对命令行编程我还是有点效率不高。这个软件就方便了文件的上传，编辑等等，图形化界面。

正式开始

有了上面几项之后，可以正式开始部署工作了。

登录 WinSCP，连接远程服务器

打开 WinSCP，会出现如下界面

主机名，输入你的服务器公网 ip，端口号不变，用户名一般是 root，密码则是你购买服务器时设置的密码，点击登录。

默认是 /root 界面。

这时候把你打包好的文件，扔到某一个目录下，如 /opt，dist 和 app.js 在同一目录

登录 Xshell 连接远程服务器

打开 Xshell，第一次登录会有如下界面：

名称可以随便取一个，协议选择 SSH，主机就是你的公网 ip，

之后会有这个页面

这里我是创建好了的，点击就可以直接连接。如果你是从上一步过来的，点击之后会要输入密码

之后就连接到远程 Linux 系统了。

安装 node.js

由于我的项目是需要跨域请求数据，所以这里我选择的是用 Node.js 启动小型服务器，请求数据。

1. 下载源码
2. 解压源码
3. 编译安装

下载源码，这里以最新的 6.11.1 为例：

解压源码：

编译安装：

这里 make 过程大约30分钟，可以去做别的。

ps：这里我遇到服务器没有安装 g++ 的问题，那直接

就可以了。

安装完成后，还需要对 node 进行环境变量的配置

这里通过 WinSCP 找到 /etc/profile，右键该文件，编辑。

在 export PATH USER LOGNAME MAIL HOSTNAME HISTSIZE HISTCONTROL 上面一行添加如下代码：

ctrl + s 保存退出，然后编译一下

然后 node -v 检验是否安装成功

之后再安装守护进程，并设置开机自启。保证我们自己写的小型服务器能脱离 Xshell 在服务器上运行

全局安装：

进入 /opt （这里是你放 dist 的和 app.js 的目录），执行命令：

如果在服务器端没有防火墙墙掉端口的情况下，我们应该可以愉快的看到自己的项目了。

但是，服务器端有防火墙墙掉了端口怎么办。

vps，安装 iptables：

粗暴的关闭防火墙（不推荐）：

单独开启某一个端口（推荐）：

查看状态:

下面添加对特定端口开放的方法：

使用iptables开放如下端口

保存

重启服务

查看需要打开的端口是否生效

方法2:

或直接编辑/etc/sysconfig/iptables

保存在前面部分

再重启:

如果是阿里云，就在安全组规则里添加相应的规则即可。

总结

以上所述是小编给大家介绍的Vue.js项目部署到服务器的详细步骤。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。