Vue项目使用宝塔面板部署刷新404问题

最新推荐文章于 2025-03-12 17:50:56 发布
原创 最新推荐文章于 2025-03-12 17:50:56 发布 · 393 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js

本文详细解释了如何在Apache服务器中配置伪静态，重点关注location块中的try_files指令，以便正确处理URL请求并导向index.html。

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

配置伪静态

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

司戊
关注
Vue项目在上传宝塔后 除首页外页面刷新出现404
qq_68695044的博客
12-24 1093
控制台打开网络可以看到首次进来的时候是正常的刷新一次后请求网址发生了变化，并且出现404这是因为在项目打包后，dist文件中只存在一个index网页，当我们从网址进去后通过路由跳转到达其他页面，关键在这里，当我们在其他页面执行刷新操作，nginx location 是没有相关配置的，所以就会出现 404 的情况。
vue3部署宝塔后请求接口404以及刷新页面404的问题解决方案
????鱼干～
08-05 4128
vue3部署宝塔后请求接口404以及刷新页面404的问题解决方案
（已解决）宝塔部署Vue项目时非首页刷新404
BrianGriffin的博客
10-16 1094
部署成功后项目正常运行，但是一但非首页刷新就会报错:404在网页的设置中的配置文件添加上图代码：重启后即可正常运行。
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
水w的博客
08-07 1357
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面
宝塔面板部署项目（SpringBoot+Vue）
爱吃Java的羊的博客
10-24 1267
先安装Java环境（根据项目情况选择），网站 - Java项目 - Java环境管理 - 安装Java环境，网站 - Java项目 - 新建Java项目，是springboot的，就选springboot，路径要选到jar包，项目名称自行更改，项目端口根据自己的项目来，这里能直接开放面板的端口，jdk得选，项目执行命令应该是自动生成的，开启开机启动。点击管理，选择数据库 - 导入 - 上传文件 - 选择sql文件并上传 - 向下滑动，点击执行。打开服务器对应网站（服务器ip地址+域名号），刷新即可。
使用 宝塔面板 部署 springboot 和 vue
m0_74825526的博客
03-02 968
仿照别人项目做了个基于 springboot 和 vue 的网站，在腾讯云服务器上，通过 宝塔面板 部署了该项目。项目的技术栈：Vue3、Vite5、Axios、Element Plus、Wangeditor5、Highlightjs、Spring Boot2、Mybatis、MySQL8。
宝塔发布vue项目刷新404
香-农的博客
01-30 343
解决mode: 'history'模式下刷新404；
宝塔部署vue刷新404的问题
a2578984130的博客
09-24 502
if (!-e $request_filename) { rewrite ^/(.*) /index.html last; break; }
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面。
记录开发过程中收获哪些技能、每个项目的心得、遇到的坑。
12-01 3664
Vue项目通过宝塔部署之后，页面刷新后浏览器404页面。
vue项目部署到宝塔刷新页面报404错误
weixin_45395283的博客
03-12 620
如果在本地运行正常,部署到宝塔,刷新页面报404错误,设置→配置文件,在server{}中添加以下代码。刷新后重新访问,即可发现刷新页面正常。
vue项目上传宝塔刷新页面报404
qq_70703397的博客
02-06 984
vue项目上传宝塔刷新页面报404（如果宝塔Nginx报错有解决方案）
宝塔nginx部署前端页面刷新报404
月亮被咬碎成星星的博客
01-14 2862
已解决
宝塔面板部署项目，页面刷新时出现nginx404问题
wings14的博客
08-08 1459
当宝塔部署完项目，使用项目出现页面刷新nginx404问题；
宝塔部署若依项目，本地上传的文件访问404解决方案
2401_86126477的博客
12-27 636
在文件上传跟目录创建一个txt文本，输入访问路径如果能访问即可；3.如果以上两点检测过后，依然无法访问，则可以查看项目的nginx配置文件。1. 首先排除权限问题。查询上传的目录权限是否具备访问权限；2. 排除路径问题。文件是否能被正确访问到。
vue history 模式nginx配置及配置后刷新 404 的解决办法! 宝塔+tp5+Nginx
u014737919的博客
03-16 1309
这里写自定义目录标题vue history 模式nginx配置及配置后刷新 404 vue history 模式nginx配置及配置后刷新 404 打开宝塔域名（网站）管理： 我前端包在名称“INContrarian”，这个名字，切记一定要在你域名下配置文件不在Nginx。 location /INContrarian{ if (!-e $request_filen...
宝塔部署站点，访问出现404、502、页面无法访问~~~超详解
m0_62040326的博客
10-11 3882
1、这个就没啥说的了直接去备案就行了。自己去找找资料，一搜icp备案就出来了~，跟着步骤来就行比较简单，只不过需要审核备案时间略长。据说还有php版本问题，我没遇到过这里就不说了，大家自己去探索吧~~~~1、如果你部署得项目设计Tomcat那么一定检查Tomcat是否开启了。2、检查站点里的默认文档，这里它是有优先级的可以按照下方我这进行修改。1、查看站点里，域名管理中的端口号。3、同时也要确认服务器也添加80端口。2、确认宝塔安全组开放了80端口号。三、Tomcat及站点中的默认文档。
vue项目使用宝塔面板部署刷新404问题
weixin_45982458的博客
11-18 1416
原因是由于vue项目使用。模式，只需要将之改成。
宝塔部署vue项目接口404
最新发布
03-17
<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`目录。 --- ###
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值