如何在一台服务器上部署多个前端（vue、nginx）

如何在一台服务器上部署一套主系统，多套子系统。
可以通过设置域名、端口、location实现，本文主要介绍如何通过域名实现。

一、vue项目的相关设置(axios注意设置不同的baseUrl)

1. 设置vue-router 基路径

image.png

2. 设置webpack 的publicPath、outputDir

• vue-cli3.0/4.0（vue.config.js）
  这里是将所有系统都打包至build目录下

  
  
  image.png
• vue-cli2.0（config/index.js）
  vue-cli2.0修改打包文件名
  
  image.png

---

二、nginx相关配置

1. 第一种方法

image.png

root  D:/webBC/CTS_WEB/bilibili2/build;
location /ctsCounter {
    index  index.html index.htm;
    # history模式，刷新页面404情况
    if (!-e $request_filename) {
        rewrite ^/(.*) /ctsCounter/index.html last;
        break;
    }
}
location /ctsCounterTask {
    index  index.html index.htm;
    # history模式，刷新页面404情况
    try_files $uri $uri/ /ctsCounterTask/index.html;
 }

2. 第二种方法

image.png

location /ctsCounter {
  root /usr/local/cts/static/build;
  try_files $uri $uri/ @router1;
  #index  index.html index.htm;
}
location @router1 {
  root /usr/local/cts/static/build;
  rewrite ^.*$ /ctsCounter/index.html last;
}

所有代码

#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  500;

    gzip  on;

    server {
        listen       9600;
        server_name  localhost;
        # 配置文件上传大小
        client_max_body_size 10G;
        #charset koi8-r;

        #access_log  logs/host.access.log  main;
        root F:/webP/BP/web-front-end/dist;
        location / {
            # 设置/默认位置
            root F:/webP/BP/web-front-end/dist/bp;
            index  index.html index.htm;
            try_files  $uri $uri/ /index.html;
        }
        location /bp/ {
            index  index.html index.htm;
            try_files  $uri $uri/ /bp/index.html;
        }
        location /hap/ {
            index  index.html index.htm;
            try_files  $uri $uri/ /hap/index.html;
        }
        location /ntt/ {
            index  index.html index.htm;
            try_files  $uri $uri/ /ntt/index.html;
        }

        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        error_page   500 502 503 504  /50x.html;
        error_page   405   =200 $uri;
        location = /50x.html {
            root   html;
        }

        # 后端接口请求代理
        #rewrite         ^/iot/(.*)$ /$1
        location /bps/ {
          # rewrite         ^.+iot/?(.*)$ /$1 break;
          add_header      Access-Control-Allow-Origin *;
          add_header      Access-Control-Allow-Headers "Accept, X-Token, Content-Type";
          add_header      Access-Control-Allow-Methods "GET, POST, DELETE, PATCH, PUT, OPTIONS";
          proxy_pass      http://xxxx/;

          # （以下2句）配置允许创建websocket
          # proxy_set_header Upgrade websocket;
          # proxy_set_header Connection Upgrade;
        }

        location /api/ {
          # rewrite         ^.+iot/?(.*)$ /$1 break;
          add_header      Access-Control-Allow-Origin *;
          add_header      Access-Control-Allow-Headers "Accept, X-Token, Content-Type";
          add_header      Access-Control-Allow-Methods "GET, POST, DELETE, PATCH, PUT, OPTIONS";
          proxy_pass      https://xxxx/;

          # （以下2句）配置允许创建websocket
          # proxy_set_header Upgrade websocket;
          # proxy_set_header Connection Upgrade;
        }
      
        # 注意：如果post接口报405，注意下请求代理地址https://xxxx或者https://xxxx/
        location /t2ds {
          # rewrite         ^.+iot/?(.*)$ /$1 break;
          add_header      Access-Control-Allow-Origin *;
          add_header      Access-Control-Allow-Headers "Accept, X-Token, Content-Type";
          add_header      Access-Control-Allow-Methods "GET, POST, DELETE, PATCH, PUT, OPTIONS";
          proxy_pass      https://xxxx;

          # （以下2句）配置允许创建websocket
          # proxy_set_header Upgrade websocket;
          # proxy_set_header Connection Upgrade;
        }
    }
}

基于端口、基于location看这里~