使用nginx部署vue项目

1 配置nginx.conf
    1.1 用xshell连接上linux测试服务器
    1.2 执行命令查看nginx服务启动情况：ps aux | grep nginx
        1.2.1 会出现多个，其中有一个是master，然后后面跟了一段路径，这里是：/usr/sbin/nginx，表示运行的是这个/usr/sbin/ 下的 nginx文件；
        1.2.2 执行/usr/sbin/nginx -t(或者进入/usr/sbin目录执行 nginx -t)，这个时候你会看到如下这样的语句打印：这表示nginx的配置文件是：/etc/nginx/nginx.conf
              nginx: the configuration file /etc/nginx/nginx.conf syntax is ok
              nginx: configuration file /etc/nginx/nginx.conf test is successful
    1.3 编辑nginx.conf配置文件，原来的配置不动他，在server上方，添加include /etc/nginx/conf.d/*.conf;去引入配置文件，这里因为已经配了，所以就不用改了

如图：

    1.4 因此vue项目的nginx配置就放到/etc/nginx/conf.d/目录下，这里没有，所以新建一个文件：vim xxx.conf；下面就是配置的具体内容
    1.5 如果修改了配置文件，需要执行：/usr/sbin/nginx -s reload 进行配置重新加载
2 下面配置好之后，因为端口是8100和8101，是新加的端口，访问不了，需要向防火墙上添加中这2个端口：
    // 查看现在所有的开放的端口号
    firewall-cmd --list-ports
    // 给防火墙添加端口号
    firewall-cmd --permanent --add-port=8100/tcp
    // 删除端口号
    firewall-cmd --permanent --remove-port=8880/tcp
    // 刷新防火墙
    firewall-cmd --reload
3 配置xxx.conf中配置的root目录指向vue打包后的文件放到这个目录下，我这里分别是：
    /home/customer-ui-PC/dist/
    /home/customer-service-staff/dist
    在本地vue项目，执行npm run build生成一个dist文件夹，将dist文件夹下的文件通过xftp全部丢到上面对应的目录中，这样就完成了vue打包到nginx服务器了，
    然后到浏览器访问即可：192.168.1.196:8100（因为这里配置的server_name是localhost，而测试服务器的本机地址就是192.168.1.196）

具体项目配置举例：

customer-ui-PC.conf

server {
    listen 8100; #你想让你的这个项目跑在哪个端口
    server_name localhost; #访问项目的域名(localhost则为当前linux服务器的ip)，正式环境则换成域名，如：kf.xxx.com;
    location /{ #url为/时，即根目录时指向的资源地址
        root   /home/customer-ui-PC/dist/;     #dist文件的位置
        try_files $uri $uri/ /index.html;      #dist目录下的index.html文件
    }
    location /api{
        proxy_pass http://192.168.1.xxx:xxxx; #转发地址：这里相当于是将/api替换为http://192.168.1.xxx:xxxx/api
    }
    location /orderApi {
        proxy_pass http://192.168.1.xxx:xxxx/order; #这里由于不是和/orderApi一样的url，要替换成/order，所以要在proxy_pass这里指定；对比vue.config.js文件中的pathRewrite属性进行path重写
    }
    location /loginApi {
        proxy_pass http://192.168.1.xxx:xxxx/auth; #同上
    }
}