nginx部署 vue3 同时 配置接口代理(详细)

Vue项目配置.env文件

在项目根目录下创建文件夹(.env.production )

image

## .env.production 生产环境配置
VUE_APP_SYS_URL = sysapi  ##nginx 需要用的的代理表示
VUE_APP_MODE = product   ## 模式
baseUrl 使用 VUE_APP_SYS_URL 变量代替

image

Nginx下载部署和配置api代理

Nginx 下载地址 http://nginx.org/en/download.html
根据需要下载对应版本

image

下载后，解压文件夹

image

build项目

image

image

nginx配置程序需要的api地址(编辑conf/nginx.conf文件)

打开nginx.conf文件

image

更改以下配置

image

        location /sysapi/ {
            proxy_set_header Host $http_host;
            proxy_set_header X-Real-IP $remote_addr;
            proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
            proxy_set_header X-Forwarded-Proto $scheme;
            #rewrite ^/api/(.*)$ /$1 break;  #重写
            proxy_pass http://127.0.0.1:9992/; # 设置后端服务器的协议和地址
        }

至此完成 vue项目的部署 和 后台api 代理

posted @ 2023-07-13 15:14  KizunaT  阅读(2249)  评论(0)  编辑  收藏  举报