实现两个项目Nginx多location实现多个静态资源的访问

实现在一台服务器上使用nginx部署多个前端项目的方法主要有三种
基于域名配置
基于端口配置
基于location配置

基于location配置
目的
根据url不同，匹配不同的前端项目。比如有两个项目A和B，我们希望访问localhost:8000/projectA来访问项目A，访问localhost:8000projectB来访问项目B。

实现
强调一下，实现以上目的是需要你的项目和nginx的配置同时修改的，这里我以vue项目为例，来演示一遍。

vue.config.js
vue.config.js中的publicPath:设置项目的根路径，用于指定部署时的基础URL。默认情况下，Vue CLI会假设你的应用是被部署在一个域名的根路径上，例如 /。

A项目

module.exports = {
  publicPath: '/projectA/',
  transpileDependencies: true,
}

B项目

module.exports = {
  publicPath: '/projectB/',
  transpileDependencies: true,
}

nginx.conf的server节点配置
这里有几个需要强调的地方：

• nginx安装目录下有一个html文件夹，我们把A、B两个项目打包后文件夹dist放在这个文件夹下并且分别重命名为projectA和projectB；
• 只有location /下用root, location /projectA和 location /projectB的配置是用alias！！！，root和alias的区别请自行查询。
  alias 只能配置在location 中，后面必须要以 “/” 结尾, 否则会查找不到文件, 报404错误; 而 root 对 “/” 可有可无。
• 如果请求的路径不匹配任何已配置的location块，最后的location /块将会处理这些请求。在这个示例中，它将会服务于默认的前端项目，你可以根据需要进行调整。
  路径顺序很重要，Nginx将会使用第一个匹配的location块来处理请求。

#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;
    client_max_body_size       256m;

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

    #gzip  on;
    server {
        listen 4100;
        server_name  localhost;
        

        #charset koi8-r;

        #access_log  logs/host.access.log  main;
 
		#location @router {
		#		rewrite ^.*$ /index.html break;
		#}

		#location /oa {
		#	#try_files $uri $uri/ @router;
        #    alias  html/oa;
		#	index  index.html index.htm app.html app.htm;
		#}

		#location / {
		#	#try_files $uri $uri/ @router;
        #    root   html/rzzl;
		#	index  index.html index.htm app.html app.htm;
		#}
		
		location /oa {
			alias  html/oa;
			index  index.html index.htm app.html app.htm; # 默认首页文件
		}
		location / {
			root   html/rzzl;
			index  index.html index.htm app.html app.htm; # 默认首页文件
		}
		
        location /oa/api/ {
			#网络连接/读/写超时设置
			proxy_connect_timeout 60s;
			proxy_read_timeout 60s;
			proxy_send_timeout 60s;
			#真实IP
			proxy_set_header Host $host;
			proxy_set_header X-Forwarded-Host $server_name;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			client_max_body_size  1000m;
			#代理
			proxy_pass  http://127.0.0.1:8080/;
            #允许cros跨域访问
            #add_header 'Access-Control-Allow-Origin' '*';
        }
        
		#后端服务地址
		location /api/ {
			#网络连接/读/写超时设置
			proxy_connect_timeout 60s;
			proxy_read_timeout 60s;
			proxy_send_timeout 60s;
			#真实IP
			proxy_set_header Host $host;
			proxy_set_header X-Forwarded-Host $server_name;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			client_max_body_size  1000m;
			#代理
			proxy_pass  http://127.0.0.1:81/;
            #允许cros跨域访问
            #add_header 'Access-Control-Allow-Origin' '*';
        }
    }
	
	

    # another virtual host using mix of IP-, name-, and port-based configuration
    #
    #server {
    #    listen       8000;
    #    listen       somename:8080;
    #    server_name  somename  alias  another.alias;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}


    # HTTPS server
    #
    #server {
    #    listen       443 ssl;
    #    server_name  localhost;

    #    ssl_certificate      cert.pem;
    #    ssl_certificate_key  cert.key;

    #    ssl_session_cache    shared:SSL:1m;
    #    ssl_session_timeout  5m;

    #    ssl_ciphers  HIGH:!aNULL:!MD5;
    #    ssl_prefer_server_ciphers  on;

    #    location / {
    #        root   html;
    #        index  index.html index.htm;
    #    }
    #}

}