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; #同上
    }
}

Logo

前往低代码交流专区

更多推荐