windows10 下本机搭建nginx发布部署vue项目并访问本机后端

解决Vue部署后Nginx后台请求404问题

原创已于 2023-02-01 11:49:05 修改 · 939 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#nginx #vue.js #运维

于 2023-02-01 11:45:06 首次发布

vue部署到nginx 专栏收录该内容

2 篇文章

订阅专栏

文章详细介绍了如何下载并配置Nginx，特别是针对/api/的location设置，以代理到本地8080端口。同时，文章解决了Vue应用在Nginx部署后可能出现的404错误，强调了关键的proxy_set_header和client_max_body_size等配置项。

1、下载nginx，并解压到相应目录

2、配置nginx的配置项nginx.conf

location /api/ {
	proxy_pass http://localhost:8080/;
	 proxy_redirect off;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header   Cookie $http_cookie;
          # for Ajax
          #fastcgi_param HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header HTTP-X-REQUESTED-WITH $http_x_requested_with;
          proxy_set_header HTTP_X_REQUESTED_WITH $http_x_requested_with;
          proxy_set_header x-requested-with $http_x_requested_with;
          client_max_body_size 10m;
          client_body_buffer_size 128k;
          proxy_connect_timeout 90;
          proxy_send_timeout 90;
          proxy_read_timeout 90;
          proxy_buffer_size 128k;
          proxy_buffers 32 32k;
          proxy_busy_buffers_size 128k;
          proxy_temp_file_write_size 128k;
	}

3、浏览器输入地址访问，成功

参考：

Vue部署Nginx之后，后台请求404_zhou_Tian的博客-优快云博客_vue nginx 404