vue打包部署上线nginx拦截请求转发到本地DRF

本文介绍了Vue应用打包后如何通过Nginx进行部署,并配置nginx.conf文件实现请求转发到本地DRF服务。主要步骤包括修改Vue的router配置,调整publicPath,以及在服务器上创建vue.conf文件,设置server_name、listen、root、index、location和proxy_pass等关键参数。最后通过Nginx的反向代理实现前后端通信。

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

vue上传打包并修改配置

**使用VUE开发完成后可以通过 npm run build 进行打包,默认情况下VUE的开发环境中的代理不会进行打包 如果打包后出现页面空白可以修改config/index.js文件assetsPublicPath 路径,默认情况该配置是“/”,打包后直接在/根目录下找的资源,需要改为“./”当前文件下找静态资源**

在这里插入图片描述
当修改过后还是出现空白页面找到router文件夹的index.取消点modesl即可

在这里插入图片描述
当打包后页面正常显示发现一些图标消失可以修改build下的utils.js里面的publicPath解决
在这里插入图片描述

- 上传服务器进行nginx转发实现访问

完成打包后可以通过MobaXterm 连接服务器上传到指定文件夹中,然后cd /etc/nginx/sites-available下创建 vue.conf文件进行配置:
在这里插入图片描述
server : nginx配置中的一个服务
listen : 服务器中监听的端口
server_name : ip地址或者域名
root : 打包生成的dist文件夹路径
index : dist文件夹打包生成的html文件

location : 拦截的请求路径配置信息
proxy_pass 通过反向代理进行请求转发的ip地址及端口配置

  1. 后端Django中的nginx配置
    在这里插入图片描述
    这里需要说明一下,server_name如果需要对请求进行接收处理需要配置0.0.0.0,处理所有请求,
    uwsgi_pass : Django启动的服务地址

配置完成后,再通过访问本地的8080端口访问VUE前端页面即可正常对后台进行请求

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值