nginx本地打开vue打包项目

最新推荐文章于 2024-09-07 15:34:17 发布

倔强的蜗牛@

最新推荐文章于 2024-09-07 15:34:17 发布

阅读量684

点赞数 7

文章标签： vue.js nginx 前端

本文链接：https://blog.csdn.net/yuanfanlove/article/details/135530999

版权

本文介绍了如何在Vue项目中配置Nginx，包括下载并修改nginx.conf文件，添加API路径的代理设置，以及确保正确连接和访问打包后的项目，通过proxy_pass指向后端服务器。

摘要由CSDN通过智能技术生成

1，首先下载nginx包，然后修改下载的包中的nginx.conf配置文件

其中location后面接的是要增加的域名字段(perbank8)，配置项 index index.html 代表入口文件是index.html

这个在vue项目中也要在nginx配置文件中也要配置同样的路径

在vue项目里进行配置

location /api/ {
proxy_pass http://192.168.1.19:8087/;
proxy_http_version 1.1; # http版本
proxy_set_header Upgrade $http_upgrade; # 继承地址，这里的$http_upgrade为上面的 proxy_pass
proxy_set_header Connection "upgrade";
proxy_set_header X-Real-IP $remote_addr; # 传递的ip
proxy_connect_timeout 60;
proxy_send_timeout 60;
proxy_read_timeout 3000;
}

下图是下载的ngnix包中的conf配置文件