前端vue部署nginx多端口文件配置

nginx.conf 文件

js 复制代码
worker_processes  1;

events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    sendfile        on;
    keepalive_timeout  65;

    # 开启gzip压缩
	gzip on;
	gzip_static on;
	# 不压缩临界值,大于1K的才压缩,一般不用改
	gzip_min_length 1k;
	# 压缩缓冲区
	gzip_buffers 16 64K;
	# 压缩版本(默认1.1,前端如果是squid2.5请使用1.0)
	gzip_http_version 1.1;
	# 压缩级别,1-10,数字越大压缩的越好,时间也越长
	gzip_comp_level 5;
	# 进行压缩的文件类型
	gzip_types text/plain application/x-javascript text/css application/xml application/javascript;
	# 跟Squid等缓存服务有关,on的话会在Header里增加"Vary: Accept-Encoding"
	gzip_vary on;
	# IE6对Gzip不怎么友好,不给它Gzip了
	gzip_disable "MSIE [1-6]\.";

	
    server {
		listen       8081;
		server_name  localhost;
		# 将dist文件放到Nginx 的hml文件下(推荐)
		location / {
			root	html/dist666;
			index	index.html;
			try_files $uri $uri/ /index.html;
		}
		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8091/;
		}
		# 下面的配置解决在某个界面重复刷新500的bug
		error_page	500 502 503 504 404 400  /dist666/index.html;
		location = /dist666/index.html {
			root   html;
		}
    }
	
    server {
		listen       8082;
		server_name  localhost;
		# 将dist文件放到Nginx 的hml文件下(推荐)
		location / {
			root	html/dist777;
			index	index.html;
			try_files $uri $uri/ /index.html;
		}
		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8092/;
		}
		# 下面的配置解决在某个界面重复刷新500的bug
		error_page	500 502 503 504 404 400  /dist777/index.html;
		location = /dist777/index.html {
			root   html;
		}
    }
	
    server {
		listen       8083;
		server_name  localhost;
		# 将dist文件放到Nginx 的hml文件下(推荐)
		location / {
			root	html/dist888;
			index	index.html;
			try_files $uri $uri/ /index.html;
		}
		location /prod-api/ {
			proxy_set_header Host $http_host;
			proxy_set_header X-Real-IP $remote_addr;
			proxy_set_header REMOTE-HOST $remote_addr;
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
			proxy_pass http://localhost:8093/;
		}
		# 下面的配置解决在某个界面重复刷新500的bug
		error_page	500 502 503 504 404 400  /dist888/index.html;
		location = /dist888/index.html {
			root   html;
		}
    }
}

html文件夹下放置打包之后的静态资源 dist666 dist777 dist888

相关推荐
程序员黑豆6 小时前
Java类型推断完全指南:从var到菱形运算符,掌握使用限制与最佳实践
java·前端·ai编程
To_OC7 小时前
踩了个 TS 的坑之后,我终于把 type 和 interface 掰明白了
前端·react.js·typescript
GreenTea7 小时前
深度解读 Anthropic 多智能体报告:更强的模型 ≠ 更好的协调
前端·后端·算法
浮生望8 小时前
前端API工程化:用 Mock 数据与 Axios 配置实现独立于后端的并行开发
前端
万少8 小时前
给 DeepSeek Harness 装个"应用商店":一条命令,595 个插件随你逛
前端·javascript·后端
波波0078 小时前
C# 15 重磅新特性: 带标签 break 与 continue:重新定义嵌套循环控制流
服务器·前端·c#
Brown.alexis9 小时前
es6知识点1-自备使用
前端·ecmascript·es6
記億揺晃着的那天10 小时前
NAS 内网域名访问为什么需要浏览器授权
网络·nginx·js·nas
小爬的老粉丝10 小时前
JavaScript 纯前端预览 WPS:先识别容器,再路由解析器
前端·javascript·wps
计算机魔术师10 小时前
新兴多智能体系统的模式与问题
前端