一般前端工程师只会使用npm run serve 在开发环境下验证，那么如何把npm run build 打出的包部署到服务器上进行上线呢？这篇文章就详细阐述这一流程。
1. 购买或试用阿里云服务器
作为新用户可以试用一个月阿里云服务器，阿里云官方网址如下：https://www.aliyun.com/?utm_content=se_1008364713
如果想试用的话需要实名认证，按步骤实名认证一下就可以了。
我们试用阿里云ESC服务器(选择CentOS)，按步骤试用，稍等几分钟就会收到短信，创建实例成功。如下所示：
登录到阿里云服务器，直接点击远程连接选择workbench远程连接就可以了。
登录后会看到如下界面：
2. 安装Nginx
安装Nginx会依赖其他软件包，例如pcre，zlib, openssl等，安装命令如下：
-
yum install gcc-c++
-
yum install -y pcre pcre-devel
-
yum install -y zlib zlib-devel
-
yum install -y openssl openssl-devel
用wget 下载Nginx，解压，编译，安装：
-
wget -c https://nginx.org/download/nginx-1.12.0.tar.gz
-
tar -zxvf nginx-1.12.0.tar.gz
-
cd nginx-1.12.0
-
./configure
-
make
-
make install
可能在make的时候会报2个错误，在网上搜一下就解决了。大概记得第一个错误的解决方法是在一个MakeFile中删除-Werror，第二个错误是注释一行代码就可以了。
可以用whereis 命令查看Nginx安装在哪了，一般会安装到/usr/local/目录下，接下来就启动Nginx，并打开默认页面：
-
cd /usr/local/nginx/sbin/
-
./nginx
在浏览器地址栏输入阿里云公网ip地址就会看到Nginx默认欢迎页面了。但不幸的是，打不开。
需要做如下配置：
1）改一下Nginx的服务器端口 80改为88，server_name改为公网ip地址
vim /usr/local/nginx/conf/nginx.conf如下所示：
2）在阿里云服务器管理平台手动添加一个端口配置
安全组-> 配置规则 -> 手动添加
如下所示：
这样在浏览器地址栏输入ip地址+端口号就能打开Nginx默认欢迎页面了。
3. vue项目打包
直接npm run build就可以了。记得在vue.config.js中配置publicPath: "/",
如果vue-router 使用history模式，在new vue-router的时候记得做如下配置：
-
export
default
new
Router({
-
mode:
'history',
-
base:
'/',
-
// base: process.env.BASE_URL,
-
routes
-
-
})
4. 用xftp把包上传到阿里云服务器Nginx安装目录下的/html目录
在xftp新建会话时，
1）主机名填我们开始在阿里云服务器公网IP地址
2）协议我们选择SFTP
3）端口号默认是22，不用修改
4）用户名和密码填写我的在阿里云服务器设置的，一般用户名在没有修改的情况下都是root。
如果vue项目build出的包 放在/home/dist目录下，那么相应配置文件也需要修改：
这样在浏览器中直接输入ip地址+端口号就可以看到我们的vue项目啦。如下所示：
5. 解决刷新页面出现404错误问题
在刷新页面的时候发现出现了404错误，这是Nginx配置有问题，需要增加如下配置：
-
-
-
location / {
-
root html;
-
try_files
$uri
$uri/ @router; //不加这行刷新页面会出现404错误
-
index index.html index.htm;
-
}
-
-
//路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
-
//因此需要rewrite到index.html中，然后交给路由再处理请求资源
-
location @router {
-
rewrite ^.*$ /index.html last;
-
}
-
6. 重启云服务器导致访问不了问题
在重启云服务器后，启动Nginx，再输入ip + port 结果没有成功加载网页。用命令查看Nginx 也都正常：
ps -ef | grep nginx //进程都正常
netstat -tlnup | grep nginx //Nginx 也处于listen状态
这是由于重启后把网络防火墙打开了。所以要关闭防火墙：
systemctl stop firewalld.service //关闭防火墙
systemctl status firewalld.service //查看防火墙状态
转载：https://blog.csdn.net/liubangbo/article/details/127556918