[系统运维] Nginx同一个域名下代理后端项目跟多个vue项目

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 系统运维 -> Nginx同一个域名下代理后端项目跟多个vue项目 -> 正文阅读

[系统运维]Nginx同一个域名下代理后端项目跟多个vue项目

后端项目这里使用的.net core api

配置如下

  location / {
       proxy_pass http://localhost:6006;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection keep-alive;
       proxy_cache_bypass $http_upgrade;

       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      
       add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
       add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    }

vue 项目因为是同一个域名下所以要做一下更改

路由里面修mode改成 history，base同时加上 /project/

export default new Router({
    mode: 'history',
    base: "/admin/",
    scrollBehavior: () => ({ y: 0 }),
    routes: constantRouterMap
})

public inde.html 里面 head加上
vue.config.js 里面的 publicPath: ‘/admin/’
nginx里面配置
需要注意的是一般情况下：try_files 我们只配置 $uri $uri/ /index.html这几个但是同一个域名下的话，如果路由有几段时(如：http://xxxx/admin/account/settings/base)需要加上 $uri/admin 不然会出现无法访问的情况

 location ^~ /admin{
       alias   /var/www/car/admin/;
       index index.html index.htm;  
       try_files $uri $uri/ /index.html $uri/admin;       
    }
    #代理api项目	
   location /api{
        rewrite ^.+/api/?(.*)$ /$1 break;
        include uwsgi_params;
        proxy_pass http://localhost:6006; 
  }

完整版nginx配置

server {
    listen 80;
    server_name  www.ztan.net;
    location ^~ /admin{
       alias   /var/www/car/admin/;
       index index.html index.htm;  
       try_files $uri $uri/ /index.html $uri/admin;       
    }
     #反向代理vue 项目接口	
   location /api{
        rewrite ^.+/api/?(.*)$ /$1 break;
        include uwsgi_params;
        proxy_pass http://localhost:6006; 
  }
    location / {
       proxy_pass http://localhost:6006;
       proxy_http_version 1.1;
       proxy_set_header Upgrade $http_upgrade;
       proxy_set_header Connection keep-alive;
       proxy_cache_bypass $http_upgrade;

       proxy_set_header Host $host;
       proxy_set_header X-Real-IP $remote_addr;
       proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      
       add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
       add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
    }
      
}