Vue项目部署Nginx配置

avatar 2020年07月22日21:06:10 0 1407 views

前两天把前后端分离的博客完成了,在部署的 vue 项目时遇到了一些小问题。这里记录一下

一、配置路由转发

首先介绍一下开发环境的配置如下

devServer: {
    host: '127.0.0.1',
    port: 9999,
    proxy: {
        '/sens': {
            target: 'http://127.0.0.1:8888',  // 请求本地 需要sens后端项目
            ws: true
        },
        '/foo': {
            target: '<other_url>'
        }
    }
},

上面的配置指的是,凡是127.0.0.1:9999/sens 的接口都转发成 127.0.0.1:8888/sens

 

部署到Nginx上后,需要配置转发才能实现上面的效果。

因为我的前端和后端部署在两个项目

前端:admin.liuyanzhao.com

后端:liuyanzhao.com

 

前端所在的Nginx的配置如下

server
{
    listen 80;
    listen 443 ssl http2;
    server_name admin.liuyanzhao.com;
    index index.php index.html index.htm default.php default.htm default.html;
    root /www/wwwroot/admin.liuyanzhao.com;
    try_files $uri $uri/ /index.html;
    
    
    #HTTP_TO_HTTPS_END
    ssl_certificate    /etc/letsencrypt/live/admin.liuyanzhao.com/fullchain.pem;
    ssl_certificate_key    /etc/letsencrypt/live/admin.liuyanzhao.com/privkey.pem;
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:HIGH:!aNULL:!MD5:!RC4:!DHE;
    ssl_prefer_server_ciphers on;
    ssl_session_cache shared:SSL:10m;
    ssl_session_timeout 10m;
    error_page 497  https://$host$request_uri;

     # 配置代理
    location /sens/{
        rewrite ^/(.*) /$1 break;  
        proxy_pass https://liuyanzhao.com/;
    }

}

 

主要看这个

    # 配置代理
    location /sens/{
        rewrite ^/(.*) /$1 break;  
        proxy_pass https://liuyanzhao.com/;
    }

 

二、刷新页面404

刷新页面的时候404

解决办法为添加

try_files $uri $uri/ /index.html;

 

 

 

  • 微信
  • 交流学习,有偿服务
  • weinxin
  • 博客/Java交流群
  • 资源分享,问题解决,技术交流。群号:590480292
  • weinxin
avatar

发表评论

avatar 登录者:匿名
可以匿名评论或者登录后台评论,评论回复后会有邮件通知

  

已通过评论:0   待审核评论数:0