前两天把前后端分离的博客完成了，在部署的 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;