Nginx部署vue项目（vue+nginx）代理转发

最新推荐文章于 2025-06-07 21:05:57 发布

Sunnymeta

最新推荐文章于 2025-06-07 21:05:57 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： vue web前端文章标签： vue

本文链接：https://blog.youkuaiyun.com/qq_39425927/article/details/110939922

web前端同时被 2 个专栏收录

34 篇文章

订阅专栏

vue

20 篇文章

订阅专栏

本文介绍如何安装Nginx并进行基本配置，包括设置监听端口、服务器名称、根目录及索引文件等。同时详细说明了如何配置代理，将前端Vue项目与后端API连接起来，确保前后端分离部署下的正常通信。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

安装nginx

下载解压就可以了

配置代理

nginx/conf/nginx.conf

server {
        listen       8088; #访问的端口
        server_name  localhost; #ip,服务器名

        #charset koi8-r;

        #access_log  logs/host.access.log  main;

        root F:\szpf\coding\shenzhen-oa-website-master\shenzhen-oa-website-master\dist;
        #vue项目的打包后的dist
        # index index.html index.htm;

        # location / {
        #         try_files $uri $uri/ /index.html;
        # }

       #代理后台接口
         location /api/ { #vue的请求接口要以api开头
             proxy_pass http://192.168.1.178:6180/;#转发请求的地址
             proxy_connect_timeout 6000;#链接超时设置
             proxy_read_timeout 6000;#访问接口超时设置
       }
        #error_page  404              /404.html;

        # redirect server error pages to the static page /50x.html
        #
        error_page   500 502 503 504  /50x.html;
        location = /50x.html {
            root   html;
        }
    }