Vue项目部署到nginx配置

将vue项目打包生成的dist文件夹,复制到nginx目录下的html文件夹

在这里插入图片描述

worker_processes 1;
events {
	worker_connections 1024;
}
http {
	include mime.types;
	default_type application / octet - stream;
	sendfile on;#tcp_nopush on;

	#keepalive_timeout 0;
	keepalive_timeout 65;

	#gzip on;

	server {
		listen 80;
		server_name localhost;
		location / {
			root html / dist; # 资源目录
			#root / usr / share / nginx / html;
			#try_files $uri $uri / /index.html last;
            index  index.html index.htm;
			try_files $uri $uri/@router;#需要指向下面的@router否则会出现vue的路由在nginx中刷新出现404
		}
		location@router {
			rewrite ^ . * $ / index.html last;
		}
		location~ ^ /api/ {
			rewrite ^ /api/ (. * ) $ / $1
			break;
			proxy_pass http: //127.0.0.1:81; # 反向代理
		}
		error_page 500 502 503 504 / 50x.html;
		location = /50x.html {
            root   html;
        }
    }
}/
posted @ 2022-11-11 20:47  小匠i  阅读(937)  评论(0)    收藏  举报