Vue项目部署到nginx配置

最新推荐文章于 2024-08-30 11:37:49 发布

@小匠

最新推荐文章于 2024-08-30 11:37:49 发布

阅读量373

点赞数

分类专栏：前端文章标签： nginx

本文链接：https://blog.csdn.net/qq_45629145/article/details/114880369

版权

前端专栏收录该内容

37 篇文章 1 订阅

订阅专栏

将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;
        }
    }
}/