多个vue项目生产环境下NGINX配置文件

使用场景

1. 多个项目
2. 同一端口
3. 多个项目使同一IP 

使用前提

通过nginx代理的有三种路径
	1. api类型，访问后台接口服务，nginx负责反向代理
	2. 静态文件类型，访问css,js等文件
	3. vue路由类型，全部指向index.html

• 以上三种类型，访问路径默认遵循如下原则
  1. 必须含有api字样在路径中，配置反向代理位置

  # 任何以api开头的请求都会被反向代理
  location ^~/api {
  	proxy_pass http://192.168.150.140:9999;
  }
  

2. webpack打包的静态文件访问路径必须为：项目名称/static

     # 多项目下静态文件配置
       location ~ (.*)/static/ {
           root  /usr/share/nginx/;
       }
   

3. vue打包后的路由配置必须为：项目名称

      #  多版本配置情况的配置：项目名称/v + 版本号
      location ~ /(\w+)/v(\d+) {
          try_files $uri $uri/ /index.html last;
          add_header Access-Control-Allow-Origin *;
          alias  /usr/share/nginx/$1/v$2;
      }
   
      # 通用配置：项目名称
      location ~ /(\w+) {
          try_files $uri $uri/ /index.html last;
          add_header Access-Control-Allow-Origin *;
          alias  /usr/share/nginx/$1;
      }
   

样例配置（项目名称：bms）

1. 经过webpack打包后的文件，在dist文件夹下
   
2. 将index.html和static文件夹放到nginx的根目录（默认为/usr/share/nginx）下的bms文件夹
   
3. 确定静态文件的访问路径，bms/static + 具体文件路径
   
4. 确定接口访问路径，api + 具体接口路径
   
5. nginx配置

user nginx;
worker_processes auto;
# 错误日志
error_log /var/log/nginx/error.log;
# PID
pid /run/nginx.pid;
 
# 默认包含的配置
# include /usr/share/nginx/modules/*.conf;
 
events {
    worker_connections 1024;
}
 
http {
    log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
                      '$status $body_bytes_sent "$http_referer" '
                      '"$http_user_agent" "$http_x_forwarded_for"';
 
   	# NGINX访问日志
    access_log  /var/log/nginx/access.log  main;
    
    sendfile            on;
    tcp_nopush          on;
    tcp_nodelay         on;
    keepalive_timeout   65;
    types_hash_max_size 2048;
 
 	## 注意该文件的位置
    include             /etc/nginx/mime.types;
    default_type        application/octet-stream;
 
    server {
        listen       80;
        server_name  _;
        root /usr/share/nginx/bms/;
        index /bms/ui/index.html;
 
        # API配置
        location ^~/api {
            proxy_pass http://192.168.150.140:9999;
        }
 
        # 多项目下静态文件配置
        location ~ (.*)/static/ {
            root  /usr/share/nginx/;
        }
 
        # 多项目下文件夹配置
        location ~ /(\w+)/v(\d+) {
            try_files $uri $uri/ /index.html last;
            add_header Access-Control-Allow-Origin *;
            alias  /usr/share/nginx/$1/v$2;
        }
     
        # 多项目下index.html
        location ~ /(\w+) {
            try_files $uri $uri/ /index.html last;
            add_header Access-Control-Allow-Origin *;
            alias  /usr/share/nginx/$1;
        }
    }
}

联系方式

微信：17702201250