nginx代理vue项目路由跳转刷新

news2024/11/19 23:25:29

常规代理

在我们日常开发中，前端部署到服务器，需要用到nginx部署，简单代理如下：


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

   
    server {
        listen       8088;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   "E:\develop\xxx\xxx\dist";
            index  index.html index.htm;
        }
        # 添加路由
      
		location /api {
            proxy_pass   http://192.168.1.66:8202/;
            proxy_redirect off;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    
       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

      
    }
  
   



}

然后启动nginx，在浏览器输入 localhost：8088回车即可;

代理vue路由

根据常规代理完成后，我们发现，在浏览器里直接输入 localhost：8088/home找不到页面，这样导致直接跳转vue路由失败！如果配置多个路由需要其他页面嵌套或者打开多个窗口就会出现问题，这里我们需要配置nginx 的一个try_files 属性即可解决:

下面是全部配置


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

   
    server {
        listen       8088;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location / {
            root   "E:\develop\xxx\xxx\dist";
            index  index.html index.htm;
            try_files $uri $uri/ /index.html; 
        }
        # 添加路由
      
		location /api {
            proxy_pass   http://192.168.1.66:8202/;
            proxy_redirect off;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    
       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

      
    }
  
   



}

然后我们就可以在浏览器输入 localhost:8088/login和 localhost:8088/home直接打开对应vue配置的路由了

nginx代理vue路由，并配置前缀

如果我们项目很多，需要部署到门户上，或者使用的是乾坤，或一些特别的需求，这个时候客户需要我们加上前缀，如 localhost:8088/xxx/home localhost:8088/xxx/login，这个时候我们需要改两处地方

第一步：修改vue路由，在vue的路由加上前缀

通过路由给的方法 createWebHistory 设置前缀，如果没有前缀为空或“/”即可，这里我们个我们的路由加上 /Manage 前缀（我这里用的是vue3，如果是vue2 配置base属性）

第二步：我们设置nginx配置，nginx配置也要加上前缀，如下：

注意：我们也要在try_files 属性里加入 /Manage

完整配置


#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;

#pid        logs/nginx.pid;


events {
    worker_connections  1024;
}


http {
    include       mime.types;
    default_type  application/octet-stream;

    #log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
    #                  '$status $body_bytes_sent "$http_referer" '
    #                  '"$http_user_agent" "$http_x_forwarded_for"';

    #access_log  logs/access.log  main;

    sendfile        on;
    #tcp_nopush     on;

    #keepalive_timeout  0;
    keepalive_timeout  65;

   
    server {
        listen       8088;
        server_name  localhost;

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        location /Manage {
            root   "E:\develop\xxx\xxx\dist";
            index  index.html index.htm;
            try_files $uri $uri/ /Manage/index.html; 
        }
        # 添加路由
      
		location /api {
            proxy_pass   http://192.168.1.66:8202/;
            proxy_redirect off;
            proxy_set_header Upgrade $http_upgrade;
            proxy_set_header Connection 'upgrade';
            proxy_set_header Host $host;
            proxy_cache_bypass $http_upgrade;
        }
    
       
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }

      
    }
  
   



}

第三步：我服务器上新建Manage文件夹，我们需要把我们的dist的内容包放到Manage文件夹下

、