vue部署到宝塔请求接口报404错误

本文介绍了解决Vue前端与SpringBoot后端部署在同一服务器后,前端访问后端接口出现404错误的方法。通过配置宝塔面板中的nginx代理,使前端能够正确地访问后端接口。

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

问题

我将前端vue和后端Spring Boot全部都部署到了宝塔上,后端项目部署成功后直接请求接口成功,运行本地vue项目使用代理服务器访问接口也是成功的,但是部署到vue上的项目访问接口报404错误

解决

经向某位大佬求教后找到了解决办法:需要配置宝塔上的nginx代理才行,解决步骤如下:

  1. 点击nginx的设置(如果没有nginx就在同一页面搜索安装即可)
    在这里插入图片描述
  2. 点击配置修改,鼠标滑动到页面最底部,复制红框里这个路径/www/server/panel/vhost/nginx(配置修改这个文件尽可能不要做改动)
    在这里插入图片描述
  3. 点击文件,复制该路径
    在这里插入图片描述
  4. 在该页面新建一个以.conf为结尾的配置文件,比如:haha.conf
    在这里插入图片描述
  5. 双击haha.conf进行编辑,内容如下:
	server {
	    listen  81; // 监听81端口
	    server_name localhost; // 因为我的后端和前端都部署到了宝塔上,所以server_name可以直接写localhost
	    
	    // 配置代理
	    /* 
	    	第一个代理含义:
	    	  我的网站地址是http://120.77.8.124:81/#/login/passLogin,
	    	  当它看到81后的第一条斜杠时会到`/www/wwwroot/120.77.8.124`路径底下找index.html页面
	    */
	    location / {
	        index index.html;
	        root /www/wwwroot/120.77.8.124;
	    }
	    
	   	/* 
	   		配置接口代理
	   		    我前端的代理服务器代码块下的图所示。
	   		^~/api/:当nginx看到路由中包含/api/会自动将/api/去到,并将/api/前边的部分替换成`http://localhost:15050/`
	    */
	    location ^~/api/ {
	        proxy_pass http://localhost:15050/;
	    }
	}
  1. 修改vue.config.js文件里的代理服务器

本地测试和部署到服务器上后,请求后端的接口地址可能变了,所以有时候需要修改下。
注释掉的那一行是用于本地测试的,部署到线上后应该改成target: 'http://120.77.8.124:15050'
注意:vue.config.js文件是前端vue项目里的,宝塔配置nginx看前边那些就行了。

在这里插入图片描述

经过上边这些步骤就能成功访问接口了

<think>好的,我现在需要帮助用户解决在宝塔面板部署Vue项目时遇到的接口404问题。首先,我得回忆一下用户提供的引用内容,看看有没有相关的解决方案。用户提到了四个引用,其中引用[1]提到在PHP网站的配置文件中添加代码解决刷新404的问题,这可能涉及到Nginx的配置。引用[3]提到将Vue的dist文件上传到ThinkPHP的public目录,这可能涉及路径配置的问题。 接下来,我需要分析接口404的常见原因。通常,API接口404可能是因为请求路径不正确,或者后端服务没有正确代理。Vue项目部署后,前端静态文件由Nginx处理,而API请求需要被代理到后端服务器。如果Nginx配置中没有正确设置代理,就会导致404错误。 根据引用[1],用户是通过在Nginx配置中添加`try_files`解决了页面刷新的404,这说明用户可能使用的是history模式的路由。但这里的问题是关于API接口404,可能需要检查反向代理的设置是否正确。用户的后端可能是Spring Boot或ThinkPHP,需要确认API的路径是否匹配,并且Nginx是否将请求正确转发到后端端口。 另外,引用[3]提到将Vue的dist文件放在public目录下,这可能意味着前端和后端在同一服务器上,但路径配置可能需要调整。如果后端API的路径是`/api/`,那么Nginx需要将所有以`/api`开头的请求转发到后端服务,比如8080端口。如果配置中没有这样的代理规则,就会导致404。 可能的解决方案步骤包括检查Nginx配置中的代理设置,确认前端请求的API地址是否正确,以及确保后端服务正在运行并监听正确的端口。还需要检查路径是否有拼写错误,或者是否需要配置跨域(CORS),不过404更可能是路径或代理问题而不是跨域。 现在,我需要将这些思路整理成一个清晰的步骤指南,确保用户能够逐步检查和解决问题。同时,要引用相关的引用内容,比如引用[1]中的Nginx配置修改,引用[3]的路径部署方法。可能还需要提醒用户检查后端服务的状态和端口是否正确,以及前端生产环境的API地址配置是否正确。</think>### 宝塔面板部署Vue项目API接口404问题解决方案 #### 1. **检查Nginx反向代理配置** - **问题原因**:Vue前端请求的API路径未被正确代理到后端服务,导致Nginx直接返回404。 - **解决方案**: 1. 在宝塔面板中进入对应站点的Nginx配置文件(通常在`网站`→对应站点→`设置`→`配置文件`)。 2. 添加反向代理规则,将API请求路径(如`/api`)代理到后端服务端口。例如: ```nginx location /api/ { proxy_pass http://localhost:后端端口/; # 如Spring Boot的8080或ThinkPHP的端口 proxy_set_header Host $host; proxy_set_header X-Real-IP $remote_addr; } ``` 3. 保存并重启Nginx服务[^1][^3]。 #### 2. **确认前端生产环境API地址** - **问题原因**:Vue打包后的静态文件未正确配置后端API地址。 - **解决方案**: 1. 在Vue项目的生产环境配置(如`.env.production`)中,设置正确的API基地址: ```javascript VUE_APP_API_BASE_URL = '/api/' # 与Nginx代理路径一致 ``` 2. 重新构建Vue项目并部署宝塔面板的指定目录(如`/www/wwwroot/项目名`或ThinkPHP的`public`目录)[^2]。 #### 3. **验证后端服务状态** - **问题原因**:后端服务未启动或端口未开放。 - **解决方案**: 1. 通过SSH登录服务器,使用命令`netstat -tunlp | grep 端口号`检查后端服务是否在运行。 2. 在宝塔面板的`安全`页面,确保后端服务端口(如8080)已放行。 3. 重启后端服务(如Spring Boot的JAR包或ThinkPHP服务)[^2][^4]。 #### 4. **处理Vue路由模式冲突** - **问题原因**:若使用Vue的`history`路由模式,可能导致Nginx未正确处理非静态资源请求。 - **解决方案**: 1. 在Nginx配置中添加`try_files`规则(优先级低于API代理): ```nginx location / { try_files $uri $uri/ /index.html; } ``` 2. 确保此配置位于API代理规则之后,避免覆盖API路径。 #### 5. **检查文件部署路径** - **问题原因**:Vue的`dist`文件未正确部署Nginx根目录。 - **解决方案**: 1. 将Vue打包后的`dist`文件夹内所有文件上传至宝塔站点目录(如`/www/wwwroot/项目名`)。 2. 若与PHP框架(如ThinkPHP)混合部署,需将`dist`文件覆盖到框架的`public`目录。 --- ###
评论 9
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值