Nginx部署Vue

用的若依的springboot + vue框架,后端打包成jar就好了;

1.  前端Vue打包命令:npm run build:prod

    会生成dist目录,里面有

2.  把dist目录上传到某个目录下,例如我放在:/usr/local

        随后配置Nginx的nginx.conf文件

#user root;
worker_processes  1;

events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    server {
        listen       80;
        server_name  localhost;

        location / {
            root   /usr/local/dist; # 路径改成自己的dist路径
            try_files $uri $uri/ /index.html;
            index  index.html index.htm;
        }

        location /prod-api/{
                proxy_set_header Host $http_host;
                proxy_set_header X-Real-IP $remote_addr;
                proxy_set_header REMOTE-HOST $remote_addr;
                proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
                proxy_pass http://ip:port/; #设置监控后端启动的端口
        }


        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
                root html;
        }

	}
}

3. 最后重启Nginx:/usr/local/nginx/sbin/nginx -s reload -c /usr/local/nginx/conf/nginx.conf

/usr/local/nginx/sbin/nginx  --  Nginx的绝对路径

/usr/local/nginx/conf/nginx.conf  -- 配置文件的绝对路径,表示用该配置文件启动Nginx

重启之后,浏览器输入服务器IP即可访问了

参考:https://www.jb51.net/article/241964.htm

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值