前端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

相关推荐
REDcker16 分钟前
浏览器端Web程序性能分析与优化实战 DevTools指标与工程清单
开发语言·前端·javascript·vue·ecmascript·php·js
donecoding2 小时前
一个 sudo 引发的血案:npm 全局包权限错乱彻底修复
前端·node.js·前端工程化
风骏时光牛马2 小时前
Raku正则匹配与数据批量处理实操案例
前端
nbwenren2 小时前
2026实测:Gemini 3 镜像站视觉能力实践——拍照原型图,一键生成 HTML+CSS 代码
前端·css·html
Lee川2 小时前
Prisma 实战指南:像搭积木一样设计古诗词数据库
前端·数据库·后端
Linsk2 小时前
Java和JavaScript的关系真是雷峰和雷峰塔的关系吗?
java·javascript·oracle
当时只道寻常2 小时前
浏览器文本复制到剪贴板:企业级最佳实践
javascript
jinanwuhuaguo2 小时前
(第二十九篇)OpenClaw 实时与具身的跃迁——从异步孤岛到数字世界的“原住民”
前端·网络·人工智能·重构·openclaw
广州华水科技2 小时前
深度测评2026年单北斗GNSS位移监测系统推荐,与高口碑变形监测设备一同引领行业新风尚
前端