nginx 配置 与 vue 打包配置

nginx 配置

基本命令

• 启动nginx

nginx

• 停止nginx

nginx -s stop

• 重新加载配置文件

nginx -s reload

• nginx 配置文件

worker_processes  4;

events {
    worker_connections  1024;
}

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

    sendfile        on;

	client_max_body_size  300m;

    gzip  on;

	server {
		#监听端口
		listen       8881;
		#服务运行地址
		server_name  localhost;  # 可以写端口，也可以写域名
		
		#charset koi8-r;
		#access_log  logs/host.access.log  main;
		
		#设置允许跨域
		#add_header Access-Control-Allow-Origin *;
		#add_header Access-Control-Allow-Methods POST,GET,OPTIONS;
		#add_header Access-Control-Allow-Headers Authorization;
		
		#静态资源目录
		root D:\\nginx-1.19.4\\web\\dist;  
		
		location / {
			index index.html index.htm;
			#配合vue-router的history模式
			try_files $uri $uri/ @router;
		}
		#对应上面的@router，主要原因是路由的路径资源并不是一个真实的路径，所以无法找到具体的文件
		#因此需要rewrite到index.html中，然后交给路由在处理请求资源
		location @router {
			rewrite ^.*$ /index.html last;
		}
		#vue项目中的请求地址前面都需要加上api
		#发起请求的代理配置，地址包含/api的回全部替换地址并转发到proxy_pass下的地址
		location ^~ /web {
			rewrite ^/b/(.*)$ /$1 break;
			proxy_pass http://192.168.10.190:9121/;
		}
	}
}

• win 关掉进程

askkill /f /t /im nginx.exe —关掉进程

• 如果是linux要用。把service 拿出来就行，使用代理访问不到的话，一定要加上rewrite
• vue 打包读取配置时，他的 .env.production 里面的 VUE_APP_FILE_API 一定要和 api 里面的前缀一样，不然nginx代理不到对应的端口

linux 里面的nginx 的配置

events {
    worker_connections  1024;
}


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

    sendfile        on;
   
    keepalive_timeout  65;
    
    client_max_body_size   20m;
	server {
			listen       80;
			# 配置域名
			server_name  location;
			
			location / {
				# 配置你 前端文件放的位置
				root   /home/dockervue/hanvue01/nginx/html/;
				index  index.html index.htm;
				try_files $uri $uri/ /index.html;
				}
			
			error_page   500 502 503 504  /50x.html;
			location = /50x.html {
				root   html;
			}
			
	   	location ^~ /api {
			rewrite ^/b/(.*)$ /$1 break;
			proxy_pass http://192.168.110.1:49155/;
		}     
    }
}

• 这是，linux 上面的配置，使用docker 代理打包
  * 为什么要加 rewrite ^/b/(.*)$ /$1 break;
  如果不加，根本就匹配不到
• ^~ /api 这是通配符，就是匹配你api下面是 api 的所有的东西
•